Thanks Ryosuke.  You mean  > the ability to assign an arbitrary descendant node of a shadow host to be assigned to a slot, right? 

I saw your proposal in the issue discussion and I think it'll definitely improve ergonomics for web developers. Let's do it in the next version of the Imperative slot API.

On Sat, Aug 1, 2020 at 12:09 AM Ryosuke Niwa <rniwa@webkit.org> wrote:

Hi Yu,

I've reviewed your PRs and they look okay. We still prefer having the ability to assign an arbitrary descendant node of a shadow root to be assigned to a slot since there are a number of user cases we care about that could be addressed with such a capability but what's currently being proposed doesn't preclude that possibility in the future as far as I could tell.

- R. Niwa

On Thu, Jul 30, 2020 at 10:28 AM Yu Han <yuzhehan@chromium.org> wrote:

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.  And Chrome has implemented this API based on the F2F summary. 

• Specification Title: Imperative Shadow DOM Distribution API
  • Explainer
  • Spec PRs for HTML and DOM
  • WhatWG DOM issue discussion. 
  • TAG Review.
  • ChromeStatus
• 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.

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