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