同一区域内相同自定义组件的样式设置问题及错误排查

你的写法存在的核心问题是**:host()选择器的使用对象错误**：

:host(.red) 这个选择器的作用是匹配带有.red类的content-area组件本身，而不是你模板里的<my-button>元素。你把.red和.green类加在了<my-button>上，但样式却试图作用在父组件content-area上，自然不会生效。

下面分两种常见场景给出正确的实现方式：

场景1：组件内部直接管理子元素样式 #

如果content-area组件需要自己管控内部<my-button>的样式，直接在组件的<style>标签里通过类选择器定位子元素即可：

<dom-module id="content-area">
  <template>
    <style>
      /* 定位组件内带.red类的my-button */
      my-button.red {
        color: red;
      }
      /* 定位组件内带.green类的my-button */
      my-button.green {
        color: green;
      }
    </style>
    <my-button class='red'>Hello</my-button>
    <my-button class='green'>Hello</my-button>
  </template>
</dom-module>

场景2：通过外部样式文件定制子组件样式 #

如果你确实需要从外部custom-style.html控制样式，需要根据my-button的封装情况选择不同写法：

情况A：my-button无Shadow DOM（样式未封装） #

直接通过后代选择器穿透定位到目标元素：

<custom-style>
  <style is="custom-style">
    /* 选择content-area内部带.red类的my-button */
    content-area my-button.red {
      color: red;
    }
    /* 选择content-area内部带.green类的my-button */
    content-area my-button.green {
      color: green;
    }
  </style>
</custom-style>

情况B：my-button是带Shadow DOM的封装组件 #

Shadow DOM会隔离外部样式，此时推荐让my-button暴露CSS自定义变量，通过变量来定制样式：

首先修改my-button组件，定义可定制的颜色变量：

<dom-module id="my-button">
  <template>
    <style>
      :host {
        /* 定义默认文本色变量 */
        --button-text-color: #333;
        color: var(--button-text-color);
      }
    </style>
    <button><slot></slot></button>
  </template>
</dom-module>

然后在外部custom-style.html中，通过类来覆盖对应变量：

<custom-style>
  <style is="custom-style">
    my-button.red {
      --button-text-color: red;
    }
    my-button.green {
      --button-text-color: green;
    }
  </style>
</custom-style>

这种方式既遵循了Shadow DOM的封装原则，又能灵活定制不同实例的样式。

内容的提问来源于stack exchange，提问作者batgerel.e