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

2023年10月30日 177次阅读

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

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

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

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

谢谢.

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

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

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

点赞