Есть ли способ стилизовать веб-компонент на основе контейнера, в котором он находится?

Я пытаюсь написать несколько веб-компонентов, которые реагируют на тему контейнера, в котором они находятся.

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

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

Я бы хотел, чтобы цвет фона в темной теме изменился на темный цвет. Я пробовал CSS, как показано ниже, внутри моего теневого корня:

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

Но, похоже, на это вообще не реагируют. Есть ли способ изменить стиль веб-компонента в зависимости от контейнера, в котором он находится?


html css web-component custom-element shadow-dom
person jjcm    schedule 18.07.2018    source источник
comment
Вы пробовали [dataset-theme='dark'] my-custom-element{background-color: #333}?   -  person Justinas    schedule 18.07.2018

Ответы (3)


arrow_upward
2
arrow_downward

:host-context() псевдокласс CSS будет позволяют вам стилизовать пользовательский элемент в зависимости от его контекста.

: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>

person Supersharp    schedule 18.07.2018

arrow_upward
1
arrow_downward

Вы можете попробовать так

CSS : 

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

Это может быть работа.

person Manoj A    schedule 18.07.2018

arrow_upward
0
arrow_downward

Попробуйте написать простой CSS для того же. Поскольку вы, возможно, создали этот компонент где-то. Следовательно, он будет функционировать как обычные HTML-теги.

CSS : 

my-custom-element {
   background-color : red;
}
person Chiragkumar Maniar    schedule 18.07.2018