From 8b483262d6f7de37200eac9ff8f12e32320978fb Mon Sep 17 00:00:00 2001 From: Alan Davalos Date: Mon, 5 Sep 2022 17:36:43 +0900 Subject: [PATCH 1/2] Add themeing status --- reports/2022.html | 94 +++++++++++++++++++++++++++++++---------------- 1 file changed, 63 insertions(+), 31 deletions(-) diff --git a/reports/2022.html b/reports/2022.html index 74d0a84..4d5c0f9 100644 --- a/reports/2022.html +++ b/reports/2022.html @@ -141,9 +141,9 @@

Table of Contents

Themeing + WICG/webcomponents#864 - - + Uncertain Styling children of slotted content @@ -248,26 +248,26 @@

Initial API Summary/Quick API Proposal

%gt;form> %gt;fancy-input name="fancy">%gt;/fancy-input> %gt;/form> - + %gt;script> class FancyInput extends HTMLElement { static get formAssociated() { return true; } - + constructor() { super(); this.#internals = this.attachInternals(); this.#internals.setFormValue('I can participate in a form!'); } } - + customElements.define('fancy-input', FancyInput); - + document.querySelector('form').addEventListener('submit', event => { event.preventDefault(); const formData = new FormData(event.target); - + console.log(formData.get('fancy')); // logs 'I can participate in a form!' }); %gt;/script> @@ -289,11 +289,11 @@

Initial API Summary/Quick API Proposal

this.#internals.setFormValue('I can participate in a form!'); const button = document.createElement('button'); root.append(button); - + button.addEventListener('click', this.#onClick); this.button = button; } - + #onClick = () => { if (this.#internals.invalid) { this.#internals.setValidity(); // Marks the element as valid @@ -611,7 +611,7 @@

Links

  • Mozilla -
    • + @@ -1127,51 +1127,83 @@

    Links

    Previous WCCG Report(s)
    N/A
    GitHub issues:
    -
    ---
    +
    + +
    Browser positions:
    -
    ---
    +
    N/A
    +
    Explainers
    +
    Original explainer

    Description

    -

    ---

    +

    Provide a solution for deep cross-shadow root styling of web components without the forwarding needed using ::part or the granularity needed using CSS variables.

    Status

    Initial API Summary/Quick API Proposal

    -

    Summary or proposal based on current status; paragraph(s) and code.

    +

    The original proposal suggested using a similar syntax as with shadow parts.

    + 
    +          <x-button>
+            #shadow-root
+            <button theme="button"></button>
+          </x-button>
+
    + 
    +          :root::theme(button) { ... }
+
    +

    Further discussions after ::theme was initially dropped from the spec have also suggested creating new media query types for themeing for better readability and allowing for versioning.

    + 
    +          @media (theme-name: vaadin) and (theme-version: 2.0) {
+            :is(vaadin-text-field, vaadin-select):dir(rtl)::part(input-field)::after {
+              transform-origin: 0% 0;
+            }
+          }
+
    + 
    +          // registering the theme on the author side
+          this.attachShadow({ mode: 'open', theme: { name: 'vaadin', version: '2.0' }});
+
    +

    The media query solution wouldn't completely eliminate the need for the ::theme selector as it doesn't solve the issue with exporting shadow parts.

    Key Scenarios

    -

    ---

    +

    Concerns

    Dissenting Opinion

    Related Specs

    Open Questions

    @@ -1499,7 +1531,7 @@

    Related Specs

    Declarative Shadow DOM
  • - Children Changed Callback + Children Changed Callback
  • Observable Node Connectedness @@ -1605,21 +1637,21 @@

    Initial API Summary/Quick API Proposal

    attribute any value; void commit(); }; - - + + interface NodePart : Part { readonly attribute Node node; }; - - + + interface AttributePart : Part { constructor(Element element, DOMString qualifiedName, DOMString? namespace); readonly attribute DOMString prefix; readonly attribute DOMString localName; readonly attribute DOMString namespaceURI; }; - - + + interface ChildNodePart : Part { constructor(Node node, Node? previousSibling, Node? nextSibling); readonly attribute Node parentNode; @@ -1817,20 +1849,20 @@

    Initial API Summary/Quick API Proposal

    // name inherited from Attr // value inherited from Attr // ... - + connectedCallback () { // called when the ownerElement is connected to the DOM } - + disconnectedCallback () { // called when the ownerElement is disconnected from the DOM } - + attributeChangedCallback() { // called when the value property of this attribute changes } } - + customAttributes.define("material-ripple", MaterialRipple); From 5b8d1d2d2d6883b463b190c498678663cc966b10 Mon Sep 17 00:00:00 2001 From: Alan Davalos Date: Tue, 6 Sep 2022 14:25:21 +0900 Subject: [PATCH 2/2] Correct theming spelling --- reports/2022.html | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/reports/2022.html b/reports/2022.html index 4d5c0f9..8e50dc2 100644 --- a/reports/2022.html +++ b/reports/2022.html @@ -140,7 +140,7 @@

    Table of Contents

    Not addressed - Themeing + Theming WICG/webcomponents#864 Uncertain @@ -1120,7 +1120,7 @@

    Open Questions

    -

    Themeing

    +

    Theming

    Links

    @@ -1160,7 +1160,7 @@

    Initial API Summary/Quick API Proposal

               :root::theme(button) { ... }
    -

    Further discussions after ::theme was initially dropped from the spec have also suggested creating new media query types for themeing for better readability and allowing for versioning.

    +

    Further discussions after ::theme was initially dropped from the spec have also suggested creating new media query types for theming for better readability and allowing for versioning.

               @media (theme-name: vaadin) and (theme-version: 2.0) {
             :is(vaadin-text-field, vaadin-select):dir(rtl)::part(input-field)::after {
@@ -1177,20 +1177,20 @@ 
    Initial API Summary/Quick API Proposal
    
       
    
         
    Key Scenarios
    
         
      
-          
    • Page-wide themeing when using component libraries: CSS variables and shadow parts somewhat allow for this to happen. However, CSS variables are too granular so you end up using too many of them. Shadow parts on the other hand require extensive forwarding which can make maintenance difficult for library authors.
      • 
+          
    • Page-wide theming when using component libraries: CSS variables and shadow parts somewhat allow for this to happen. However, CSS variables are too granular so you end up using too many of them. Shadow parts on the other hand require extensive forwarding which can make maintenance difficult for library authors.
      • 
         
    
       
    
       
    
         
    Concerns
    
         
      
-          
    • Limited themeing: Many component authors would want to have a way to limit which CSS properties are subject to a theme.
      • 
-          
    • Versioning and interactions with scoped registries: A themeing solution would need to consider the possibility of multiple versions of a same component coexisting in a complex application.
      • 
+          
    • Limited theming: Many component authors would want to have a way to limit which CSS properties are subject to a theme.
      • 
+          
    • Versioning and interactions with scoped registries: A theming solution would need to consider the possibility of multiple versions of a same component coexisting in a complex application.
      • 
         
    
       
    
       
    
         
    Dissenting Opinion
    
         
      
-          
    • Some people seem to consider open shadow root styling would solve most of their themeing-related issues.
      • 
+          
    • Some people seem to consider open shadow root styling would solve most of their theming-related issues.
      •