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 <yuzhe...@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 <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 >
_______________________________________________ webkit-dev mailing list webkit-dev@lists.webkit.org https://lists.webkit.org/mailman/listinfo/webkit-dev