Question

我正在使用Dart“bee”Web Components包中的popover组件（bee）

但是，我看不到更改组件内部元素的默认样式的方法。我想改变<div class="x-popover-dialog">的样式，使其具有圆角。但是，如果我将以下内容添加到我的应用程序的css文件中，它会在到达“out”文件夹时被删除。

.x-popover-dialog {
    border-radius: 6px;
}

这是可能的，还是实际修改Web组件本身（或者可能扩展它）的唯一方法？

感谢。

Answer 1

好的，这里有很多因素。首先，您是否无法重新定义组件中定义的类。如果该元素未指定自己的样式，您当前可以将自己的样式应用于组件。例如，您可以更改组件中“p”元素的字体大小。或者说div#someid { color: red; }但你不能重新定义一个类，或者为类添加定义。

除非明确允许，否则您可以根据需要修改样式，这是web_ui中的一个错误。目前跟踪为：Issue 374：支持apply-author-styles。

理想情况下，当实施完全支持时，除非Web组件本身明确允许，否则您将无法将自己的样式应用于Web组件。有关apply-author-styles和相关reset-style-inheritance的详细信息，请参阅精彩的Shadow DOM 201教程。