如何为 Dart Web 组件的内部元素设置样式？答案

【问题标题】：How to style internal elements of a Dart Web Component?如何为 Dart Web 组件的内部元素设置样式？
【发布时间】：2013-05-08 17:39:44
【问题描述】：

我正在玩 Dart“bee”Web 组件包 (bee) 中的 popover 组件

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

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

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

谢谢。

【问题讨论】：

【解决方案1】：

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

除非明确允许，否则您完全可以修改样式这一事实是 web_ui 中的一个错误。目前追踪为：Issue 374：支持 apply-author-styles。

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

【讨论】：

感谢您的回答。所以基本上你不能为 Web 组件设置样式，除非组件的作者明确指定“apply-author-styles=true”或允许通过自定义伪元素或 CSS 变量设置样式。小部件创建者绝对要牢记这一点。
当然。组件的目标是提供一个完整的、可重用的标记，就像一个元素一样。但是我们并不总是希望允许更改我们的格式（在页面上使用 Google+ 按钮。您不应该能够将背景颜色更改为 Facebook 蓝色）。但正如您所说，随着开发的进展，小部件创建者需要记住，也许我们并不都想要黑白元素。 =) 一个不错的解决方案是作者允许样式，然后将类应用于组件的各个部分，但不指定该类本身。这允许用户很好地定义类。