Add shadowrootslotassignment attribute by keithamus · Pull Request #43753 · mdn/content

keithamus · 2026-04-12T09:38:53Z

Description

This adds docs for the shadowrootslotassignment attribute.

Motivation

Trying to add the docs so that whatwg/html#12267 can be merged.

Additional details

I've largely cribbed the docs style from the other shadowroot* attributes.

Related issues and pull requests

[WebAPI] Enable shadowrootslotassignment by default #43866

pepelsbey · 2026-04-12T09:49:49Z

Thank you. Is there an existing browser implementation? It seems to be missing from BCD for now.

pepelsbey · 2026-04-12T09:55:09Z

It seems like it's not implemented yet. So I would keep this PR open until the first experimental implementation lands, as we only document features supported by browsers. Thank you again for doing this in advance!

keithamus · 2026-04-12T09:59:48Z

It seems like it's not implemented yet. So I would keep this PR open until the first experimental implementation lands, as we only document features supported by browsers. Thank you again for doing this in advance!

Right. https://groups.google.com/a/mozilla.org/g/dev-platform/c/8qxAHE9-Xdo is my intent to ship this in Firefox. I'll work on adding BCD definitions.

github-actions · 2026-04-12T10:00:14Z

Preview URLs (7 pages)

External URLs (2)

URL: /en-US/docs/Web/API/Element/attachShadow
Title: Element: attachShadow() method

https://html.spec.whatwg.org/multipage/custom-elements.html (1 time) (Note! This may be a new URL 👀)

URL: /en-US/docs/Web/HTML/Reference/Elements/slot
Title: <slot> HTML web component slot element

https://w3c.github.io/html-aria/ (1 time) (Note! This may be a new URL 👀)

(comment last updated: 2026-05-15 06:04:46)

hamishwillee · 2026-04-24T02:00:26Z

@keithamus THanks for this. I'm supported to sort out docs for the FF151 release - have updated BCD and release note. Let me know what help you need to push this over the line.

keithamus · 2026-04-24T07:54:30Z

@hamishwillee happy to have you take over this PR if you have time. I won’t be able to get to it until late next week or so.

hamishwillee · 2026-05-12T07:17:32Z

From #43753 (comment)

The element could use manual slot assignment to detect a change event in the select, and slot only the elements who's data-genre matches, thereby not rendering elements that don't match.

Thanks @keithamus . I've tried to integrate your comments in the section added in https://github.com/mdn/content/pull/43753/changes#r3224439661 - it updates the slots guide, which I think needed this.

@keithamus Can you please check this ALL sometime soon? I can merge it of course, as I have the power, but it isn't right that I should do so without you checking it. I am happy with it "broadly"

chrisdavidmills

@hamishwillee I had a look around as requested, and ended up doing a full review ;-)

Really interesting stuff.

chrisdavidmills · 2026-05-12T08:16:39Z

    - `mode`
      - : A string specifying the _encapsulation mode_ for the shadow DOM tree.
        This can be one of:
        - `open`


These descriptions should be pared down, and the code snippets placed in an explainer section in the "Description".

Good idea. Fixed in 559fd27

Looks great

keithamus · 2026-05-12T09:07:12Z

 customElements.define("my-custom-element", MyCustomElement);
 ```

+### Shadow DOM with named slot assignment


Given this is the default, this example feels a little verbose:

named slot assignment is quite well supported (I think back to Safari 10, Firefox 63, Chrome 53 or so?)

The slotAssignment IDL is only recently supported due to the addition of manual slot assignment, so that seems like a more relevant example - especially when it comes to feature detection.

Fair enough. What I have done here is simplied the example to remove the feature test and not even specify the slot assignment. It is still worth showing.

Then I have added a second example that shows the manual assignment - same output but done manually.
It is not a great example of the possibilities - we should improve the example in the Using template and slots guide for that (a job for another day). However it does show quite clearly how it works.

Co-authored-by: Hamish Willee <[email protected]>

Co-authored-by: Chris Mills <[email protected]> Co-authored-by: Keith Cirkel <[email protected]> Co-authored-by: Hamish Willee <[email protected]>

hamishwillee · 2026-05-15T06:06:34Z

Thanks @chrisdavidmills and @keithamus - I've done fixes for all of this. I think a lot better. One possible further change (in addition to whatever else you need) is possibly choosing to refer to "unnamed" as "manual"? It is easier to parse as a reader.

chrisdavidmills

This all looks fine from my perspective. I won't merge yet, but I will approve to avoid blocking further progress.

hamishwillee · 2026-05-17T23:55:06Z

Thanks @chrisdavidmills . I'm going to merge as it is much more clear than what preceded it. Certainly more could be done but I'd like to get what we have here in for the FF151 release tomorrow.

@keithamus If you have further comments, in particular to the idea in #43753 (comment), they would be welcome but we can do as a post process. Thanks for kicking this off too - saved a lot of time.

keithamus requested review from a team as code owners April 12, 2026 09:38

keithamus requested review from estelle and pepelsbey and removed request for a team April 12, 2026 09:38

github-actions Bot added Content:HTML Hypertext Markup Language docs Content:WebAPI Web API docs labels Apr 12, 2026

keithamus mentioned this pull request Apr 12, 2026

Add shadowrootslotassignment attribute whatwg/html#12267

Merged

6 tasks

github-actions Bot added the size/s [PR only] 6-50 LoC changed label Apr 12, 2026

keithamus force-pushed the add-shadowrootslotassignment-attribute branch from c4c9d81 to 01414b1 Compare April 12, 2026 09:58

github-actions Bot reviewed Apr 12, 2026

View reviewed changes

Comment thread files/en-us/web/html/reference/elements/template/index.md Outdated

Comment thread files/en-us/web/html/reference/elements/template/index.md Outdated

Comment thread files/en-us/web/html/reference/elements/template/index.md

keithamus force-pushed the add-shadowrootslotassignment-attribute branch 4 times, most recently from ce2b217 to 24afef4 Compare April 12, 2026 10:11

keithamus mentioned this pull request Apr 12, 2026

Add HTMLTemplateElement.shadowrootslotassignment attribute mdn/browser-compat-data#29457

Merged

hamishwillee reviewed Apr 20, 2026

View reviewed changes

Comment thread files/en-us/web/api/htmltemplateelement/shadowrootslotassignment/index.md Outdated

ddbeck reviewed Apr 20, 2026

View reviewed changes

Comment thread files/en-us/web/api/htmltemplateelement/shadowrootslotassignment/index.md Outdated

hamishwillee reviewed Apr 20, 2026

View reviewed changes

Comment thread files/en-us/web/html/reference/elements/template/index.md

This was referenced Apr 21, 2026

NA [HTML] Implement shadowrootslotassignment attribute #43860

Closed

[WebAPI] Enable shadowrootslotassignment by default #43866

Closed

hamishwillee reviewed Apr 21, 2026

View reviewed changes

Comment thread files/en-us/web/api/shadowroot/slotassignment/index.md Outdated

hamishwillee force-pushed the add-shadowrootslotassignment-attribute branch from 4893b1c to dab8147 Compare April 24, 2026 01:59

chrisdavidmills requested changes May 12, 2026

View reviewed changes

keithamus commented May 12, 2026

View reviewed changes

hamishwillee reviewed May 15, 2026

View reviewed changes

Comment thread files/en-us/web/api/web_components/using_templates_and_slots/index.md Outdated

hamishwillee reviewed May 15, 2026

View reviewed changes

Comment thread files/en-us/web/api/web_components/using_templates_and_slots/index.md Outdated

hamishwillee reviewed May 15, 2026

View reviewed changes

Comment thread files/en-us/web/html/reference/elements/slot/index.md Outdated

hamishwillee reviewed May 15, 2026

View reviewed changes

Comment thread files/en-us/web/html/reference/elements/template/index.md Outdated

keithamus and others added 11 commits May 15, 2026 11:37

Add shadowrootslotassignment attribute

dab9b05

Fix wording

b028638

Co-authored-by: Hamish Willee <[email protected]>

Template slot assignment examples

fbf67a7

HTMLTemplateElement.shadowRootAssignment update

25ded25

Element.attachShadow() example

84fda94

slot element - default content and tidy

72f96f9

Minor consistency fixes

6cf131f

Using templates and slots section

d1799fe

Typos and minor error fixes

4548a1c

suggestions from code review - easy ones

201791f

Co-authored-by: Chris Mills <[email protected]> Co-authored-by: Keith Cirkel <[email protected]> Co-authored-by: Hamish Willee <[email protected]>

slot element name attribute update

1ff77a4

hamishwillee force-pushed the add-shadowrootslotassignment-attribute branch from fbc8a20 to 1ff77a4 Compare May 15, 2026 02:18

hamishwillee added 5 commits May 15, 2026 12:42

attachShadow - add mode description

559fd27

template elem - improve examples

5d802d6

Element.attachShadow() - example fixes

901c047

Apply suggestion from @hamishwillee

d73ac33

HTMLTemplateElement.shadowrootslotassignment

efb1525

hamishwillee requested review from chrisdavidmills and hamishwillee May 15, 2026 06:05

chrisdavidmills approved these changes May 15, 2026

View reviewed changes

hamishwillee merged commit f77236a into mdn:main May 17, 2026
9 checks passed

Conversation

keithamus commented Apr 12, 2026 • edited by hamishwillee Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Motivation

Additional details

Related issues and pull requests

Uh oh!

pepelsbey commented Apr 12, 2026

Uh oh!

pepelsbey commented Apr 12, 2026

Uh oh!

Uh oh!

Uh oh!

Uh oh!

keithamus commented Apr 12, 2026

Uh oh!

github-actions Bot commented Apr 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

hamishwillee commented Apr 24, 2026

Uh oh!

keithamus commented Apr 24, 2026

Uh oh!

hamishwillee commented May 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

chrisdavidmills left a comment

Choose a reason for hiding this comment

Uh oh!

chrisdavidmills May 12, 2026

Choose a reason for hiding this comment

Uh oh!

hamishwillee May 15, 2026

Choose a reason for hiding this comment

Uh oh!

chrisdavidmills May 15, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

keithamus May 12, 2026

Choose a reason for hiding this comment

Uh oh!

hamishwillee May 15, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

hamishwillee commented May 15, 2026

Uh oh!

chrisdavidmills left a comment

Choose a reason for hiding this comment

Uh oh!

hamishwillee commented May 17, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

keithamus commented Apr 12, 2026 •

edited by hamishwillee

Loading

github-actions Bot commented Apr 12, 2026 •

edited

Loading

hamishwillee commented May 12, 2026 •

edited

Loading

hamishwillee May 15, 2026 •

edited

Loading