[webkit-dev] Request for Webkit position for Imperative Shadow DOM Distribution API

[Ryosuke Niwa]

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 <yuzhehan at 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 at lists.webkit.org
> https://lists.webkit.org/mailman/listinfo/webkit-dev
>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-dev/attachments/20200801/05baea75/attachment.htm>