相关疑难解决方法(0)

我有两个 Lit 元素 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">
            <!-- …