diff --git a/reports/2022.html b/reports/2022.html index 3486164..273d2fc 100644 --- a/reports/2022.html +++ b/reports/2022.html @@ -159,10 +159,10 @@

Table of Contents

Not addressed - Themeing - - + Theming + WICG/webcomponents#864 + Uncertain Styling children of slotted content @@ -273,20 +273,20 @@

Initial API Summary/Quick API Proposal

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!' }); </script> @@ -308,11 +308,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 @@ -653,7 +653,7 @@

Links

  • Mozilla -
    • + @@ -1162,58 +1162,90 @@

    Open Questions

    -

    Themeing

    +

    Theming

    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 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 {
+              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

    @@ -1541,7 +1573,7 @@

    Related Specs

    Declarative Shadow DOM
  • - Children Changed Callback + Children Changed Callback
  • Observable Node Connectedness @@ -1647,21 +1679,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; @@ -1859,20 +1891,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);