Custom Elements作为基类时如何实现渲染前隐藏元素？

以下是三种可落地的实现方案，可根据你的实际场景选择：

方案1：基类构造函数内设置行内样式（最简便，无额外依赖） #

所有继承基类的自定义元素实例化时都会优先执行基类的构造函数，执行时机远早于元素渲染到页面，不会出现闪烁问题，子类无需做任何额外修改即可继承逻辑。

class MyElement extends HTMLElement {
  constructor() {
    super();
    // 构造阶段直接设置行内隐藏样式
    this.style.display = 'none';
  }
  // 后续需要显示时调用该方法即可
  show() {
    this.style.display = 'block'; // 可替换为你需要的display属性值，比如inline-flex等
  }
} 
customElements.define('my-element', MyElement);

方案2：统一属性标记 + 全局CSS（方便样式层独立控制） #

如果不想用行内样式，希望后续可以通过CSS规则灵活覆盖状态，可以给所有基类元素添加统一的自定义属性，全局CSS只需匹配该属性即可生效，不需要关心子类的标签名。

基类代码 #

class MyElement extends HTMLElement {
  constructor() {
    super();
    // 给所有继承该基类的元素添加统一标记属性
    this.setAttribute('my-base-element', '');
  }
} 
customElements.define('my-element', MyElement);

全局CSS代码 #

[my-base-element] {
  display: none;
}
/* 需要显示时用其他类覆盖即可 */
[my-base-element].active {
  display: block;
}

方案3：修复Shadow DOM插槽缺失问题（适合原本就需要用Shadow DOM的场景） #

你之前使用Shadow DOM导致内部内容消失，是因为没有添加<slot>插槽映射外部内容，补充插槽后即可正常保留内部内容，同时用:host选择器设置隐藏样式：

class MyElement extends HTMLElement {
  constructor() {
    super();
    const shadow = this.attachShadow({mode: 'open'});
    shadow.innerHTML = `
      <style>
        :host {
          display: none;
        }
        /* 需要显示时给元素加active类即可 */
        :host(.active) {
          display: block;
        }
      </style>
      <!-- 插槽会映射自定义标签内部的所有内容，不会丢失 -->
      <slot></slot>
    `;
  }
} 
customElements.define('my-element', MyElement);

内容的提问来源于stack exchange，提问作者allthewayaround