阴影根和继承

为 <details> 元素设置样式时存在一个很大的陷阱，如 Kitty Giraudel 在此处的文档中所述。它足够晦涩，您可能永远不会遇到它，但如果您遇到了，我可以看到它会非常令人困惑（至少会让我困惑）。

也许您了解阴影 DOM？它在 Web Components 方面被广泛讨论，并且在考虑 <svg> 和 <use> 时也会出现。但 <details> 也有一个阴影 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>

正如 Amelia 解释的那样，<summary> 插入到第一个阴影根插槽中，而其余内容（称为“光 DOM”或我们案例中的 <p> 标签）插入到第二个插槽中。

问题是，这些插槽或阴影根都不能与通用选择器 * 匹配，它只匹配来自光 DOM 的元素。

所以 <slot> 在那里有点“挡道”。最终，<p> 实际上是 <slot> 的子元素。这很奇怪，因为像 details > p 这样的选择器仍然可以很好地选择它。大概，该选择器在光 DOM 中解析，然后在插入插槽后继续工作。

但是，如果您告诉某个属性 inherit（继承），事情就会崩溃。如果您执行以下操作…

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

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

…那么 <p> 将具有 8px 的边框半径。

但是，如果您执行以下操作…

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

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

那么 <p> 将像门把手一样是方形的。我想这可能是因为您无法强制通过阴影 DOM 进行继承，或者继承仅发生在父元素（即 <slot>）上？无论如何，它都不起作用。

直接链接 →