Блог

Мне нужно создать компонент, единственной целью которого было бы прикрепить некоторые CSS в shadow DOM.

 <super-table>
  <table>
    <thead>
      <!-- and so on -->
    </thead>
  </table>
</super-table>
 

Законно ли возвращать дочерние узлы в методе render (), например:

 @customElement('super-table')
class SuperTable extends LitElement {
  static styles = css`
    table {
      /* etc */
    }
  `;

  render() {
    return html`<div
      class=${classMap({
        table: true,
        'table--small': this.small,
      })}
    >
      ${this.childNodes}
    </div>`;
  }
}
 

Я не могу использовать слот, так как не смог бы стилизовать вложенные элементы. Это нормально, делать это таким образом?