我可以自定义在另一个 Web 组件中使用的 Web 组件的 CSS 吗？答案

【问题标题】：Can I custom css of my web-component used inside another web-component?我可以自定义在另一个 Web 组件中使用的 Web 组件的 CSS 吗？
【发布时间】：2020-12-04 04:52:20
【问题描述】：

我正在使用 javascript 和 lit-element。

我有一个名为“my-list”的 Web 组件，其中包含一些带有文本的 div，以及另一个 Web 组件（称为“my-table”），它是一个表格，显示具有不同功能的项目列表。在“我的表”中，我编写了一些 CSS 和一些函数，它们对表中的数据执行一些操作（例如：排序）。

我要做的是打印与“my-list”组件相关的网页，更改表格的布局（例如：减少填充，或删除表格边框，或更改字体颜色，以及类似的东西）。

我尝试在“my-list”中使用@media print，例如：

静态获取样式（）{ 返回 [ 超级样式， CSS` @媒体打印{ 我的表{ 红色; } } ` ]; }

显然，如果我尝试打印网页，my-table 中项目的字体颜色不会改变。

是否存在一种方法可以在另一个 web 组件中更改 custm web 组件的 css？

我想到了两种不同的解决方案：

使用我想要打印的正确 css 创建另一个 Web 组件“myTable-printVersion”，在“my-list”中定义它，如果我不打印页面，则设置“可见性：隐藏”和“可见性：可见” " 在@media print 中。
直接在“my-table”中定义的@media print 中修改用于打印的css。这不是我最喜欢的解决方案，因为我在其他组件中使用“my-table”组件，并且我不希望每个组件都使用相同的打印布局。例如，当我打印这些组件时，我希望它们中的每一个都具有不同的字体颜色。红色表示“my-list”，蓝色表示“myOther-list”。

感谢您的帮助！

【问题讨论】：

标签： javascript html css media-queries lit-element

【解决方案1】：

嵌套组件 <my-table> 内的元素位于组件的 shadowRoot 内，这会创建一个隔离的 DOM，其范围内的 CSS 不会泄漏到外部。

继承的属性也会像往常一样在 shadowRoots 中被继承。颜色是其中之一。因此，您的“颜色：红色”将应用于 <my-table> 的 shadowRoot 内的元素如果它们继承了该值（如果没有指定其他值，它将被应用，因为像颜色这样的继承属性将获得父级的计算值）

但“border”或“padding”等其他一些属性不会继承。要从外部设置它们的样式，您可以使用 ::part() 伪元素。

在您的嵌套组件<my-table> 中，您将公开可以从外部编辑的“部分”：

<div part="row">Table row content</div>

在<my-table> 的范围内你可以使用那个伪元素：

my-table::part(row) {
  padding: 20px;
}

对于基于外部上下文的样式，您还可以使用:host-context() 伪类函数。但是，在您的特定情况下，元素上下文不是正在发生变化，而是设备特性。

【讨论】：