Request for Webkit position for Imperative Shadow DOM Distribution API

# Yu Han (8 days ago)

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 whatwg/html#3534. And

Chrome has implemented this API based on the F2F summary.

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

Contact us to advertise here
# Ryosuke Niwa (7 days ago)

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
# Yu Han (5 days ago)

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.

Thanks, Han

# Ryosuke Niwa (a day ago)

On Sun, Aug 2, 2020 at 9:42 PM Yu Han <yuzhehan at chromium.org> wrote:

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

Yes, that's what I mean.

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.

Cool.

  • R. Niwa

Want more features?

Request early access to our private beta of readable email premium.