created page for :has-slotted and links to reference it

[dletorey]

Description

• Added page for :has-slotted
• Added See also links to:
  • <template> HTML element
  • <slot> HTML element
  • ::slotted CSS pseudo-element

Motivation

• Working on issue 36533

Related issues and pull requests

• BCD PR
• Firefox release notes PR

[github-actions]

Preview URLs

• /en-US/docs/Web/CSS/::slotted
• /en-US/docs/Web/CSS/:has-slotted
• /en-US/docs/Web/HTML/Element/slot
• /en-US/docs/Web/HTML/Element/template

(comment last updated: 2024-12-02 14:33:54)

[pepelsbey]

Looks good! Thanks :)

I have a suggestion, still. It took me a while to wrap my head around the example with all templating and slotting. Since it’s a CSS selector, I wonder if we can simplify the demo, even though it would be less practical. I think it’s fine for a reference page. Something like this, maybe?

<p>
  <template shadowrootmode="open">
    <style>
      :has-slotted {
        color: tomato;
      }
    </style>
    <slot name="one">Placeholder 1</slot>
    <slot name="two">Placeholder 2</slot>
  </template>
  <span slot="one">Slotted content</span>
</p>

[dletorey]

Looks good! Thanks :)

I have a suggestion, still. It took me a while to wrap my head around the example with all templating and slotting. Since it’s a CSS selector, I wonder if we can simplify the demo, even though it would be less practical. I think it’s fine for a reference page. Something like this, maybe?

<p>
  <template shadowrootmode="open">
    <style>
      :has-slotted {
        color: tomato;
      }
    </style>
    <slot name="one">Placeholder 1</slot>
    <slot name="two">Placeholder 2</slot>
  </template>
  <span slot="one">Slotted content</span>
</p>

I have added this simple example and also left in the original example.
I have also commented out both of the examples as there is an issue with the Play ground feature not rendering these examples, so once this has been resolved these examples can easily be added back into the page.
I have successfully been able to make this simple example work in a code pen.

[pepelsbey]

I have also commented out both of the examples as there is an issue with the Playground feature not rendering these examples

I believe the issue affects only the preview. It should be fine in production. So I’d uncomment examples. They should be fine.

As for the complex example, would it be better to have it somewhere in the web components guides/references? I’m concerned that it involves so many APIs that it would be hard to fully understand the :has-slotted role in the final result.

[dletorey]

As for the complex example, would it be better to have it somewhere in the web components guides/references? I’m concerned that it involves so many APIs that it would be hard to fully understand the :has-slotted role in the final result.

I shall remove this then.

[pepelsbey]

Thank you! I hope you can find a use for your example. It’s a good one :)

[estelle]

please avoid the term "simple"; it may not be simple for someone.

[pepelsbey]

please avoid the term "simple"; it may not be simple for someone.

I suggested removing this title altogether.

@estelle By the way, would a “Simpler example” be better in a similar case?

[estelle]

please avoid the term "simple"; it may not be simple for someone.

I suggested removing this title altogether.

@estelle By the way, would a “Simpler example” be better in a similar case?

Only one example, so your removing suggestion is better than my update suggestion.

I avoid using "simple" in all forms as much as possible because of the issue mentioned above but also because it is a term used in some specs. For example, "simple selector". When needed, though, I try to work in "simpler" instead of "simple". In this case, basic is best because it is a basic example whereas simpler would mean there is a more complex example that this example is simpler than.

(it's way too early for me to be working so apologies if i make little sense)