Re: [WICG/webcomponents] Interaction between imperative slotting and declarative shadow DOM (Issue #967)

keithamus left a comment (WICG/webcomponents#967)

https://github.com/whatwg/html/pull/12267 this adds part 1 of this, which is `shadowrootslotassignment=manual`.

Some thoughts on how slots may declaratively assign:

 - Precedent exists in HTML for id lookups for single elements, perhaps this is useful for developers? Something like:

```html
<custom-element>
    <template shadowRootMode="open" shadowRootSlotAssignment="manual">
        <slot initialAssignFor="some-ref"></slot>
    </template>
    <custom-child id="some-ref">hello</custom-child>
</custom-element>
```

 - Some elements that use manual slot assignment only do so for simple heuristics, such as tag matching or so. Perhaps we could use CSS queries to help here? This would also allow intuitive indexing over and above the `initialassignment=` attribute:

```html
<custom-element>
    <template shadowRootMode="open" shadowRootSlotAssignment="manual">
        <slot initialAssignQuery="custom-child:nth-child(1)"></slot>
        <slot initialAssignQuery="custom-child:nth-child(n+1)"></slot>
    </template>
    <custom-child>hello</custom-child>
    <custom-child>world</custom-child>
</custom-element>
```

 - Some elements might want to bucket everything into a single "loading" slot or so. Here query selector syntax also helps:

```html
<custom-element>
    <template shadowRootMode="open" shadowRootSlotAssignment="manual">
        <slot initialAssignQuery="*"></slot>
    </template>
    <custom-child>hello</custom-child>
    <custom-child>world</custom-child>
</custom-element>
```

-- 
Reply to this email directly or view it on GitHub:
https://github.com/WICG/webcomponents/issues/967#issuecomment-4073517077
You are receiving this because you are subscribed to this thread.

Message ID: <WICG/webcomponents/issues/967/4073517077@github.com>