On Sun, Aug 2, 2020 at 9:42 PM Yu Han <yuzhe...@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 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