Imperative Shadow DOM Distribution API

[yuzhe-han]

Request for Mozilla Position on an Emerging Web Specification

• Specification Title: Imperative Shadow DOM Distribution API
  • Explainer
  • Spec PRs for HTML and DOM
  • WhatWG DOM issue discussion. TPAC F2F Summary.
  • TAG Review.
• 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 specific markup, slot="" attribute, to children of 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.

The behavior of this API has been discussed in the last TPAC F2F back in Sept, 2019. The proposal has been implemented in Chrome and we would like to get an official stance from Mozzila.

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([]);
    }
}

[smaug----]

I think the proposal looks reasonable and should be relatively easy to implement.
And when looking at w3ctag/design-reviews#486 (comment), I think it is even good that the proposal doesn't include too many new features at once. If some default slot mechanism is needed, it could be added later.
So I think this is worth prototyping.

[yuzhe-han]

@smaug---- ,
Thanks for reviewing.