问题描述
我正在使用javascript和lit-element。
我有一个名为“ my-list”的Web组件，该组件在带有文本的div内，还有另一个Web组件（称为“ my-table”），该表显示了具有不同功能的项目列表。在“ my-table”内部，我编写了一些CSS和一些函数来处理表中的数据（例如：排序）。
我要做的是打印与“我的列表”组件相关的网页，更改表格的布局（例如：减少填充，或删除表格边框，或更改字体颜色，以及类似的东西）。
我尝试在“我的列表”中使用@media print，例如：
static get styles () {
return [
super.styles,css`
@media print {
my-table {
color: red;
}
}
`
];
}
很显然，如果我尝试打印网页，则my-table中项目的字体颜色不会改变。
是否存在一种在另一个Web组件内更改自定义Web组件的CSS的方法？
我想到了两种不同的解决方案：
-
使用我要打印的正确的CSS创建另一个Web组件“ myTable-printVersion”，在“我的列表”中定义它，如果不打印页面，则设置“可见性：隐藏”，然后“可见性：“可见”在@media打印中。
-
直接在“ my-table”中定义的@media打印中修改要打印的css。这不是我最喜欢的解决方案，因为我在其他组件内部使用了“ my-table”组件，并且我不希望每个组件都使用相同的打印布局。例如，当我打印这些组件时，我希望它们的字体颜色不同。红色代表“我的列表”，蓝色代表“ myOther-list”。
感谢您的帮助！
解决方法
嵌套组件<my-table>中的元素位于组件的shadowRoot内部，该组件创建一个隔离的DOM，其作用域CSS不会泄漏到外部。
继承的属性也将照常在shadowRoots中继承。颜色是一种。因此，您的“颜色：红色”将应用于<my-table> 的shadowRoot内的元素，如果它们正在继承该值（如果未指定其他值，它将被应用，因为诸如color的继承属性将获取父项的计算值）
但是其他一些属性（如“边框”或“填充”）不会继承。要从外部对它们进行样式设置，可以使用::part()伪元素。
在嵌套组件<my-table>中，您将看到可以从外部进行编辑的“部分”：
<div part="row">Table row content</div>
在<my-table>的范围内，您可以使用该伪元素：
my-table::part(row) {
padding: 20px;
}
对于基于外部上下文的样式，您还可以使用:host-context()伪类函数。但是，在您的特定情况下，元素上下文不是正在更改的内容，而是设备的特征。