7

I am creating a custom element which contains both a default (ie unnamed) slot and some named ones. I specifically want to style the content of one of the named slots, but not any of the others.

Is there a way of selecting a specific named slot.

As an example of the sort of thing I want to do, my custom element contains a dialog box - like so:

<dialog>
 <slot></slot> <!-- general content -->
 <div class="buttons">
  <slot name="action"></slot>
  <slot name="cancel"></slot>
 </div>
</dialog>

and I want to style all the action buttons a solid color and the cancel buttons a more washed out color.

akc42
  • 4,893
  • 5
  • 41
  • 60
  • 1
    Maybe `slot[name=action] { background: red; }` will work, known as an _attribute selector_. Docs: https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors – Asons Dec 22 '18 at 08:47
  • And btw, using the `::slotted()` could look like this `::slotted([name=action])` – Asons Dec 22 '18 at 08:56
  • I'm wondering if the answer isn't `slot[name=action] ::slotted(*) {background: red}` – akc42 Dec 24 '18 at 07:32
  • 4
    No, the attribute selector works within the general style tag, the _::slotted()_ selector within the _shadow-root_. You can check the live sample at MDN and edit its `::slotted(*)` to `::slotted([slot=person-age])` and you'll see that it is the attribute selector that makes the difference: https://developer.mozilla.org/en-US/docs/Web/CSS/::slotted ... and as the key here is the attribute selector, this is a dupe, and I also found the proper dupe's and updated the links. – Asons Dec 24 '18 at 20:33

0 Answers0