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

Question

我正在使用 javascript 和 lit-element。

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

我想要做的是打印与“我的列表”组件相关的网页，更改表格的布局（例如：减少填充，或删除表格边框，或更改字体颜色等） .

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

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

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

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

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

1. 使用我想要打印的正确 css 创建另一个 web 组件“myTable-printVersion”，在“my-list”中定义它，如果我不打印页面，则设置“可见性：隐藏”和@内的“可见性：可见”媒体印刷。

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

谢谢你的帮助！

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>的 scope 中，您可以使用该伪元素：

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

---

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