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

[Ryosuke Niwa]

On Sun, Aug 2, 2020 at 9:42 PM Yu Han <yuzhehan at 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 <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/20200806/35c6fd67/attachment.htm>