dart - 如何设置 Dart Web 组件内部元素的样式？

Question

我正在使用 Dart“bee”Web 组件包中的弹出框组件 ( 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 :支持应用作者样式。

理想情况下，当实现全面支持时，除非 Web 组件本身明确允许，否则您将无法将自己的样式应用于 Web 组件。欲了解更多信息apply-author-styles及相关reset-style-inheritance见伟大Shadow DOM 201教程。