Question

我正在尝试编写一些Web组件，以响应它们所在容器的主题。

<div dataset-theme='light'>
  <my-custom-element></my-custom-element>
</div>

<div dataset-theme='dark'>
  <my-custom-element></my-custom-element>
</div>

我希望将深色主题背景的背景颜色更改为深色。我已经在我的影子根目录中尝试了以下代码：

[dataset-theme='dark']
  :host
    background-color: #333

但是它似乎根本没有回应。是否有一种方法可以根据其所在的容器来更改Web组件的样式？

Answer 1

:host-context() CSS pseudo-class将允许您根据其上下文来设置自定义元素的样式。

:host-context( [dataset-theme='dark'] ) {
    background-color: #333
}

作为补充，您可以使用:host在未定义上下文时应用一些默认的CSS样式。

在演示下面：

customElements.define( 'my-custom-element', class extends HTMLElement {
  constructor () {
    super()
    this.attachShadow( { mode: 'open' } )
        .innerHTML = `<style>
            :host-context([dataset-theme="dark"]) { 
              background-color: darkblue ; 
              color: lightgray ;
            }
            :host-context([dataset-theme="light"]) { 
              background-color: lightyellow ;
              color: orange ;
            }
            :host {
              background-color: white ;
              color: black ;
            }
          </style>
          <slot>No</slot> Theme`
  }
} )

<div dataset-theme='light'>
  <my-custom-element>Light</my-custom-element>
</div>

<div dataset-theme='dark'>
  <my-custom-element>Dark</my-custom-element>
</div>

<div>
    <my-custom-element></my-custom-element>
</div>

Answer 2

您可以尝试这样

CSS : 

div[dataset-theme='dark'] my-custom-element{
   background-color : #333;
}

可能是工作。

Answer 3

尝试同样编写简单的CSS。正如您可能在某个地方创建了该组件。因此，它将用作常规的html标签。

~/.hyper.js

有没有一种方法可以根据其所在的容器来样式化Web组件？

3 个答案: