css - 选择器跨越上限还是什么？

Question

我正在为我们公司编写 RIA 系统(仅限 chrome)。不同控件的数量不断增加，我决定使用 Shadow DOM 来简化代码。这很棒，但有时需要外部重新设计。这就是问题所在，例如:

任务栏:

<taskbar side="right">
  <menubtn />
  <applist scrollable>
    <btn app="SpoPlanMon" />
  </applist>
  <tray />
</taskbar>

使用 Shadow DOM，applist 转换为:

<applist>
  <scroll-wrap>
    <scroll-bar>
      <scroll-slider />
    </scroll-bar>
    <scroll-cont>
      <btn app="SpoPlanMon" />
    </scroll-cont>
  </scroll>
</applist>

在这种情况下，我需要设置 <scroll-slider /> 样式取决于<taskbar /> side(在所谓的属性中指定，可以动态更改)。不幸的是，我不能只写 taskbar[side="top"] scroll-slider {...} ，因为只允许下边界封装。

有什么方法可以从“另一边”通过 css 选择元素吗？或者也许类似 video::-webkit-media-controls-panel ？

Answer 1

如果您使用的是成熟的Web Components您应该能够从 Javascript 获取父任务栏元素，而不仅仅是 Shadow DOM。像这样的事情:

<element>
    <template>
        ...
    </template>
    <script>
        if (this !== window) {
            this.lifecycle({
                created: function() {
                    this.parentElement.attributes['side'].nodeValue; // "right"
                }
            });
        }
    </script>
</element>

但是，这使得您无法再在任务栏之外使用 applist 组件，这通常是一件坏事。我们应该尝试使组件尽可能模块化、独立且可重用。问问自己，“关于父元素，我到底需要了解什么？”您可以将应用程序列表写为

<applist scrollable="right">...

为了能够在任何你想要的地方使用这个组件，重复只是一个很小的代价。谁知道？将来您可能会决定以 side="right" 但 scrollable="bottom"!

的方式使用任务栏和应用程序列表!

更新

如果您希望允许 Shadow DOM 元素的样式随着宿主元素的更改而动态更改，您很快就可以使用 @host @-rule 。这里的规范根本不清楚，但我认为它将像这样使用(取自 a comment on a bug for the W3 spec for Web Components ):

@host {
    div { background-color: white; }
    .warning { background-color: yellow; }
    .important .warning { background-color: orange; }
}

这将(我认为)为主机提供默认的白色背景颜色，如果主机具有警告类，则该背景颜色将被覆盖为黄色。如果主机具有important类，它还会在主机内部设置一个背景色为橙色的警告元素。