Shadow Roots und Vererbung

Es gibt eine verdammt knifflige Sache beim Styling eines <details>-Elements, wie hier von Kitty Giraudel dokumentiert. Es ist so obskur, dass man vielleicht nie darauf stößt, aber wenn doch, könnte es sehr verwirrend sein (mich würde es zumindest verwirren).

Vielleicht sind Sie mit dem Shadow DOM vertraut? Es wird oft im Zusammenhang mit Web Components besprochen und taucht auf, wenn man an <svg> und <use> denkt. Aber <details> hat auch ein Shadow DOM.

<details>
  #shadow-root (user-agent)
  <slot name="user-agent-custom-assign-slot" id="details-summary">
    <!-- <summary> reveal -->
  </slot>
  <slot name="user-agent-default-slot" id="details-content">
    <!-- <p> reveal -->
  </slot>

  <summary>System Requirements</summary>
  <p>
    Requires a computer running an operating system. The computer must have some
    memory and ideally some kind of long-term storage. An input device as well
    as some form of output device is recommended.
  </p>
</details>

Wie Amelia erklärt, wird das <summary>-Element in den ersten Shadow-Root-Slot eingefügt, während der Rest des Inhalts (genannt "Light DOM" oder in unserem Fall das <p>-Tag) in den zweiten Slot eingefügt wird.

Das Ding ist, dass keiner dieser Slots oder die Shadow Root vom universellen Selektor * erfasst werden, der nur Elemente aus dem Light DOM erfasst.

Der <slot> steht also quasi "im Weg". Dieses <p> ist am Ende tatsächlich ein Kind des <slot>. Das ist extra seltsam, denn ein Selektor wie details > p wählt es immer noch problemlos aus. Vermutlich wird dieser Selektor im Light DOM aufgelöst und funktioniert dann nach dem Einfügen weiterhin.

Aber wenn man einer Eigenschaft sagt, sie soll inherit, geht die Sache schief. Wenn man etwas wie das hier tun würde…

<div>
  <p></p>
</div>

div {
  border-radius: 8px;
}
div p {
  border-radius: inherit;
}

…dann hätte das <p> einen 8px Randradius.

Aber wenn man das hier tut…

<details>
  <summary>Summary</summary>
  <p>Lorem ipsum...</p>
</details>

details {
  border-radius: 8px;
}
details p {
  border-radius: inherit;
}

Dieses <p> wird so eckig sein wie ein Türknauf. Ich schätze, das liegt entweder daran, dass man keine Vererbung durch das Shadow DOM erzwingen kann, oder dass die Vererbung nur vom übergeordneten Element, das ein <slot> ist, erfolgt? Wie auch immer, es funktioniert nicht.

Direkter Link →