Shadow DOM关于样式的困惑-背景颜色在阴影元素（角度）上无法正常工作]]

Question

我很难理解：host元素的样式

ex：

// toggle.component.html
<p>toggle works!</p>
//toggle.component.scss
:host {
  background-color: rgba(255, 0, 0, 0.3);
}

除非显示背景色，除非我将其显示为block或inline-block之类的任何显示属性，即使该元素明显占据了内部具有p元素的空间，也是如此

这引起了我很多混乱，尤其是当必须在不同组件中对相关内容进行样式设置时（例如：我的组件表带有其他子自定义组件，例如table-row和table-header，我通常无法像以前那样设置样式。因为总是在中间有这些阴影dom元素）

为什么会这样呢？在ex：table的情况下，我应该如何适应这些影子dom元素？任何资源链接将不胜感激

编辑：我刚刚发现，在子组件顶层的元素上使用类似height: 50%之类的东西就可以了。相对于它在阴影元素之后而不是阴影元素本身之后找到的第一个元素的高度？为什么？？这在哪里解释？

仍然有此问题，难以设置网格的样式

我很难理解：host元素应如何设置样式，例如：// toggle.component.html

toggle可以工作！

//toggle.component.scss：host {background-颜色：rgba（...

Answer 1

因此，我发现阴影DOM元素采用默认显示方式，即内联，我不知道，我要强调的是display：block，因为这是最有意义的显示方式