如何在自定义元素的插槽内设置 CSS 样式？答案

【问题标题】：How to css styling inside the slot in custom element?如何在自定义元素的插槽内设置 CSS 样式？
【发布时间】：2020-10-22 07:39:09
【问题描述】：

我在 shadowDOM 自定义元素模板内应用表格样式，在插槽内，它不接受表格 th 和 td CSS。

class Table extends HTMLElement {

  constructor() {
    super();
    // console.log("this accordion -> ", this)
    setTimeout(() => {

      const template = document.createElement('template');
      template.innerHTML = `
        <style>
          ::slotted(table) {
              color: red;
              width: 100%;
          }

          ::slotted(table tr th),
          ::slotted(table tr td) {
              text-align: left;
              padding: 10px 0;
          }

        </style>
        <slot></slot>
      `;
      const shadowDOM = this.attachShadow({
        mode: 'open'
      });
      shadowDOM.appendChild(template.content.cloneNode(true));

    }, 0);

  }
  
}

customElements.define('t-table', Table);

<t-table>
  <table>
    <tr>
      <th>Sl No.</th>
      <th>Name</th>
    </tr>
    <tr>
      <td>1</td>
      <td>Name</td>
    </tr>
  </table>
</t-table>

上述场景如何应用CSS？

【问题讨论】：

标签： javascript css web-component tabular custom-element

【解决方案1】：

您不能从 ::slotted 伪元素选择器中选择子元素。
这是设计使然；组件不应该关心开槽元素的样式。例外是正在插入的元素，但不是它的后代。

而是以老式的方式从 Light DOM 中为您的元素设置样式。

class Table extends HTMLElement {

  constructor() {
    super();

    const template = document.createElement('template');
    template.innerHTML = `
      <style>
        ::slotted(table) {
            color: red;
            width: 100%;
        }
      </style>
      <slot></slot>
    `;
    const shadowDOM = this.attachShadow({
      mode: 'open'
    });
    shadowDOM.appendChild(template.content.cloneNode(true));

  }
  
}

customElements.define('t-table', Table);

.my-table tr th,
.my-table tr td {
    text-align: left;
    padding: 10px 0;
}

<t-table>
  <table class="my-table">
    <tr>
      <th>Sl No.</th>
      <th>Name</th>
    </tr>
    <tr>
      <td>1</td>
      <td>Name</td>
    </tr>
  </table>
</t-table>

但是你的影子模板除了将样式应用到开槽元素之外并没有真正做任何事情，并且没有创建不同的布局或任何东西，那么为什么还要使用 Shadow DOM？只需在 Light DOM 中的 t-table 元素上应用样式即可获得相同的效果。

class Table extends HTMLElement {
  constructor() {
    super();
  }
}

customElements.define('t-table', Table);

t-table table {
    color: red;
    width: 100%;
}

t-table tr th,
t-table tr td {
    text-align: left;
    padding: 10px 0;
}

<t-table>
  <table>
    <tr>
      <th>Sl No.</th>
      <th>Name</th>
    </tr>
    <tr>
      <td>1</td>
      <td>Name</td>
    </tr>
  </table>
</t-table>

【讨论】：

如何在模板innerhtml中应用CSS？
您只能将样式应用于 slotted 元素和 Shadow DOM 模板中固定的元素。

【解决方案2】：

查看 StackOverflow 答案：::slotted CSS selector for nested children in shadowDOM slot

【讨论】：