:has-slotted
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Die :has-slotted CSS Pseudoklasse trifft zu, wenn der Inhalt eines <slot>-Elements nicht leer ist oder nicht den Standardwert verwendet (siehe Verwendung von Templates und Slots für weitere Informationen).
Hinweis: Selbst ein einzelnes Leerzeichen-Textknoten reicht aus, damit :has-slotted zutrifft.
Dies funktioniert nur, wenn es innerhalb von CSS verwendet wird, das sich in einem Shadow DOM befindet.
css
/* Selects the content of a <slot> element that has content that is not default */ :has-slotted { color: green; } /* Selects the content of a <slot> element that has no content or default */ :not(:has-slotted) { color: red; } Syntax
css
:has-slotted { /* ... */ } Beispiele
Dieses Beispiel hat zwei <slot>-Elemente, von denen einem Inhalt zugewiesen wurde und dem anderen nicht.
HTML
html
<p> <template shadowrootmode="open"> <style> :has-slotted { color: rebeccapurple; } </style> <slot name="one">Placeholder 1</slot> <slot name="two">Placeholder 2</slot> </template> <span slot="one">Slotted content</span> </p> Ergebnis
Das <slot>-Element, dem Inhalt zugewiesen wurde, entspricht der :has-slotted-Pseudoklasse und hat den color-Wert rebeccapurple zugewiesen bekommen.
Spezifikationen
| Specification |
|---|
| CSS Scoping Module Level 1 # the-has-slotted-pseudo |
Browser-Kompatibilität
Siehe auch
- HTML
<template>-Element - HTML
<slot>-Element ::slotted