Re: [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  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  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  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 .
>>> And Chrome has implemented this API based on the F2F summary.
>>>
>>>
>>>- Specification Title: Imperative Shadow DOM Distribution API
>>>   - Explainer
>>>   
>>> 
>>>   - Spec PRs for HTML 
>>>and DOM 
>>>   - WhatWG DOM issue discussion
>>>   .
>>>   - TAG Review 
>>>   .
>>>   - ChromeStatus 
>>>- 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
>>> 
>>> .
>>>
>>> Example syntax:
>>>
>>> 
>>>
>>>
>>>
>>>
>>> class CustomTab extends HTMLElement {
>>> static get observedAttributes() {
>>>   return ['show-tab'];
>>> }
>>> constructor() {
>>> super();
>>> const shadowRoot = this.attachShadow({mode: 'open', slotAssignment: 
>>> 'manual'});
>>> shadowRoot.innerHTML = `
>>> `;
>>> }
>>> 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

Re: [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  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  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 .
>> And Chrome has implemented this API based on the F2F summary.
>>
>>
>>- Specification Title: Imperative Shadow DOM Distribution API
>>   - Explainer
>>   
>> 
>>   - Spec PRs for HTML  and
>>   DOM 
>>   - WhatWG DOM issue discussion
>>   .
>>   - TAG Review .
>>   - ChromeStatus 
>>- 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
>> 
>> .
>>
>> Example syntax:
>>
>> 
>>
>>
>>
>>
>> class CustomTab extends HTMLElement {
>> static get observedAttributes() {
>>   return ['show-tab'];
>> }
>> constructor() {
>> super();
>> const shadowRoot = this.attachShadow({mode: 'open', slotAssignment: 
>> 'manual'});
>> shadowRoot.innerHTML = ` 
>>`;
>> }
>> 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

Re: [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  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 .
> And Chrome has implemented this API based on the F2F summary.
>
>
>- Specification Title: Imperative Shadow DOM Distribution API
>   - Explainer
>   
> 
>   - Spec PRs for HTML  and
>   DOM 
>   - WhatWG DOM issue discussion
>   .
>   - TAG Review .
>   - ChromeStatus 
>- 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
> 
> .
>
> Example syntax:
>
> 
>
>
>
>
> class CustomTab extends HTMLElement {
> static get observedAttributes() {
>   return ['show-tab'];
> }
> constructor() {
> super();
> const shadowRoot = this.attachShadow({mode: 'open', slotAssignment: 
> 'manual'});
> shadowRoot.innerHTML = `  
>   `;
> }
> 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

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

[Yu Han]

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
.  And
Chrome has implemented this API based on the F2F summary.


   - Specification Title: Imperative Shadow DOM Distribution API
  - Explainer
  

  - Spec PRs for HTML  and DOM
  
  - WhatWG DOM issue discussion
  .
  - TAG Review .
  - ChromeStatus 
   - 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

.

Example syntax:


   
   
   

class CustomTab extends HTMLElement {
static get observedAttributes() {
  return ['show-tab'];
}
constructor() {
super();
const shadowRoot = this.attachShadow({mode: 'open',
slotAssignment: 'manual'});
shadowRoot.innerHTML = `
 `;
}
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