javascript - :host-context 在 Lit-Element Web 组件中未按预期工作

问题描述

我有两个 Lit-element Web 组件 - 一个是units-list，它包含许多units-list-item元素。units-list-item元素有两种不同的显示模式：紧凑和详细。因为列表元素支持无限滚动（因此可能包含数千个单元），所以我们需要在两种模式之间切换的任何机制以尽可能提高性能。

这就是为什么我认为理想的解决方案是:host-context()在元素的样式中使用伪选择器units-list-item，因为这样每个units-list-item元素都可以通过更改应用于祖先的类在两种显示模式之间切换（这将在阴影内units-list元素的 DOM ）。

units-list详细地说，这里是元素的相关标记。请注意，“触发器”类被应用于#list-contentsdiv，它是units-list模板的一部分。

<div id="list-contents" class="${showDetails ? 'detail-view table' : 'compact-view table'}">
    ${units.map(unit => html`<units-list-item .unit="${unit}"></units-list-item>`)}
</div>

如您所见，该showDetails标志控制是否将“detail-view”或“compact-view”类应用于包含所有units-list-item元素的 div。这些课程肯定被正确应用。

这是units-list-item元素的完整渲染方法（删除了不必要的标记）：

render() {
    const {unit} = this;
    // the style token below injects the processed stylesheet contents into the template
    return html`
        ${style}
        <div class="row compact">
            <!-- compact row markup here -->
        </div>
        <div class="row detail">
            <!-- detail row markup here -->
        </div>
    `;
}

然后我在units-list-item元素的样式中有以下内容（我们使用的是 SCSS，所以单行注释不是问题）：

    // This SHOULD hide the compact version of the row when the 
    // unit list has a "detail" class applied
    :host-context(.detail-view) div.row.compact {
        display: none !important;
    }

    // This SHOULD hide the detail version of the row when the
    // unit list has a "compact" class applied
    :host-context(.compact-view) div.row.detail {
        display: none !important;
    }

我对 :host-context 选择器的理解表明这应该可以工作，但是 Chrome 每次只会呈现该行的两个版本，并且 Chrome 开发工具显示选择器永远不会与任何一行匹配。

我知道有几种可行的替代方案，但这是我所知道的唯一一个可以通过更改父元素上的单个类来允许整个单元列表切换模式的替代方案。我考虑过的所有其他解决方案至少需要更新units-list-item列表中每个元素的类属性。如果可能的话，我想避免这种情况。

当然，如果可能的话，我最关心的只是让这项工作正常进行，但我也对一些事情感到好奇，找不到任何关于它们的信息。我似乎无法找到答案的两个问题是

当:host-context在本身是影子 DOM 一部分的元素中使用时，它是否认为父元素的影子 DOM 是“宿主上下文”，还是会“完全跳出”到文档 DOM？
如果是前者，会不会:host-context跳转多个shadow DOM边界？假设我有一个自定义元素，其中page包含一个自定义list元素，该元素本身包含许多自定义item元素。如果该item元素有:host-context规则，浏览器会先向上扫描该list元素的shadow DOM，然后如果没有匹配，则向上扫描该元素的shadow DOM page，如果仍然没有匹配，则向上扫描主文档DOM到<html>标签？

标签： javascriptcssweb-componentshadow-domlit-element

javascript - :host-context 在 Lit-Element Web 组件中未按预期工作

问题描述

解决方案

JSFiddle：https ://jsfiddle.net/CustomElementsExamples/jb6c81ou/

2022 年 2 月更新

推荐阅读