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

Question

我正在使用 javascript 和 lit-element。

我有一个名为“my-list”的 Web 组件，其中包含一些带有文本的 div，还有另一个 Web 组件(称为“my-table”)，这是一个显示具有不同功能的元素列表的表格。在“我的表”中，我编写了一些 css 和一些函数，用于对表内的数据执行某些操作(例如:排序)。

我想做的是打印与“我的列表”组件相关的网页，更改表格的布局(例如:减少填充，或删除表格边框，或更改字体颜色，以及类似的东西)。

我尝试在“我的列表”中使用@media 打印，例如:

    static get styles () {        return [                super.styles,           css`            @media print {                  my-table {                color: red;              }            }          `        ];      }

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

是否存在更改另一个 Web 组件内的自定义 Web 组件的 css 的方法？

我想到了 2 种不同的解决方案:

1. 使用我想要打印的正确 css 创建另一个 Web 组件“myTable-printVersion”，在“my-list”中定义它，如果我不打印页面则设置“visibility: hidden”和“visibility: visible"in @media print.

2. 直接在“my-table”中定义的@media 打印内修改用于打印的 css。这不是我最喜欢的解决方案，因为我在其他组件中使用“我的表”组件，并且我不希望这些组件中的每一个都使用相同的打印布局。例如，当我打印这些组件时，我希望它们中的每一个都使用不同的字体颜色。红色代表“我的列表”，蓝色代表“我的其他列表”。

感谢您的帮助!

Answer 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()伪类函数。但是，在您的特定情况下，元素上下文并没有发生变化，而是设备特性。