[webkit-dev] Request for Webkit position for Imperative Shadow DOM Distribution API

[Yu Han]

Hi Webkit-Dev,

We would like to get an official position from webkit for Imperative Shadow
DOM Distribution API. This proposal was discussed in the last TPAC F2F
<https://github.com/whatwg/html/issues/3534#issuecomment-537802687>.  And
Chrome has implemented this API based on the F2F summary.


   - Specification Title: Imperative Shadow DOM Distribution API
      - Explainer
      
<https://github.com/w3c/webcomponents/blob/gh-pages/proposals/Imperative-Shadow-DOM-Distribution-API.md>
      - Spec PRs for HTML <https://github.com/whatwg/html/pull/5483> and DOM
      <https://github.com/whatwg/dom/pull/860>
      - WhatWG DOM issue discussion
      <https://github.com/whatwg/html/issues/3534>.
      - TAG Review <https://github.com/w3ctag/design-reviews/issues/486>.
      - ChromeStatus <https://chromestatus.com/feature/5711021289242624>
   - Caniuse.com URL (optional):
   - Bugzilla URL (optional):
   - Mozillians who can provide input (optional):

Other information

The imperative Shadow DOM distribution API allows developers to explicitly
set the assigned nodes for a slot element. With this API, web developers
can create web components without needing to add a specific markup, slot=""
attribute, to children of the host component. In addition, it enables
conditional slotting based on either environmental state or an attribute
passed in.

More details, including more motivating uses cases, can be found in the
explainer
<https://github.com/w3c/webcomponents/blob/gh-pages/proposals/Imperative-Shadow-DOM-Distribution-API.md>
.

Example syntax:

<custom-tab show-tab="2">
   <tab-panel></tab-panel>
   <tab-panel></tab-panel>
   <tab-panel></tab-panel></custom-tab>

class CustomTab extends HTMLElement {
    static get observedAttributes() {
      return ['show-tab'];
    }
    constructor() {
        super();
        const shadowRoot = this.attachShadow({mode: 'open',
slotAssignment: 'manual'});
        shadowRoot.innerHTML = `            <div class="custom-tab">
             <slot></slot>            </div>`;
    }
    attributeChangedCallback(name, oldValue, newValue) {
        UpdateDisplayTab(this, newValue);
    }
    connectedCallback() {
        if (!this._observed) {
           const target = this;
           const showTab = this.getAttribute('show-tab');
           const observer = new MutationObserver(function(mutations) {
                UpdateDisplayTab(target, showTab);
            });
            observer.observe(this, {childList: true});
            this._observed = true;
        }
    }}
function  UpdateDisplayTab(elem, tabIdx) {
    const shadow = elem.shadowRoot;
    const slot = shadow.querySelector("slot");
    const panels = elem.querySelectorAll('tab-panel');
    if (panels.length && tabIdx && tabIdx <= panels.length ) {
      slot.assign([panels[tabIdx-1]]);
    } else {
      slot.assign([]);
    }}

thanks,

Han

_______________________________________________
webkit-dev mailing list
webkit-dev@lists.webkit.org
https://lists.webkit.org/mailman/listinfo/webkit-dev