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 On Sat, Aug 1, 2020 at 12:09 AM Ryosuke Niwa <rn...@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 <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
