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而不仅仅是 Shadow DOM，您应该能够从 Javascript 获取父任务栏元素。像这样:

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

然而，这使得您不能再在任务栏之外使用应用列表组件，这通常是一件坏事。我们应该尝试使组件尽可能模块化、独立和可重用。问问自己，“关于父元素，我究竟需要了解什么？”你能不能把应用列表写成

<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; }
}

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