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

[Yu Han]

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 <rniwa at 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 <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/20200802/51833e1a/attachment.htm>