在Vue组件里嵌入自定义Web Components时样式不生效怎么办？

你遇到的问题确实和 Web Components 的 Shadow DOM 有关。Web Components 默认会隔离内部的样式，所以父组件的全局样式或者 scoped 样式都无法穿透进去。

你用的 /deep/ 和 ::v-deep 在 Vue3 的 scoped 样式中已经不推荐用了，而且对真正的 Shadow DOM 是无效的。

要解决这个问题，有几种更优雅的方式：

使用 :deep()（Vue 推荐的新写法）
如果你还在用 scoped 样式，可以改成 Vue3 支持的 :deep()：

:deep(.custom-table .table-header) {

  color: red;

}

:deep(.custom-table .table-row) {

  border: 1px solid #ccc;

}

但注意，这种方式对 Web Components 内部样式只在组件没有使用 Shadow DOM 时才生效。

给 Web Component 传递 class 并在组件内处理样式
如果你能修改 my-table 的实现，可以在组件内通过 class 接收传入的样式，然后在组件内部定义这些 class 的样式。

比如在组件内：

constructor() {

  super();

  const shadowRoot = this.attachShadow({ mode: 'open' });

  shadowRoot.innerHTML = 

    

    
Header


    
Row


  ;

}

全局样式定义（适用于不希望修改 Web Component 的场景）
如果你不想改动 my-table，可以把需要穿透的样式写成全局样式，去掉 scoped，或者提取到单独的 CSS 文件中全局加载。

总结：更推荐的做法是控制 Web Component 的内部实现，把样式封装在组件内部定义，这样更稳定也更符合组件设计的初衷。

这个问题的关键确实是和 Shadow DOM 有关，不过在正式解决之前，咱们先理清楚几个点。

1. **Shadow DOM 的作用**：如果你的 my-table 组件使用了 Shadow DOM（大多数自定义 Web Components 都会用），那么它的内部样式是完全隔离的。外部样式（包括 Vue 的样式）是无法直接穿透到 Shadow DOM 内部的。这就是为什么你在父组件里写的 .custom-table 样式对它没影响。

2. **/deep/ 和 ::v-deep 的局限性**：这两种写法是 Vue 的深度选择器，但它们只能穿透到普通子组件的 scope 样式中，并不能穿透到 Shadow DOM 内部。所以即使你写了 ::v-deep .table-header，也无法影响 Shadow DOM 中的内容。

---

### 解决方案

既然问题出在 Shadow DOM 的隔离性上，那咱们就得换个思路。以下是几种可行的解决办法：

#### 方法 1：让 Web Component 自己支持外部样式
这是最推荐的做法。Web Components 可以通过 :host 和 part 来接受外部样式的控制。

1. 在你的 my-table 组件中，添加 part 属性：

class MyTable extends HTMLElement {

       constructor() {

           super();

           this.attachShadow({ mode: 'open' }); // 确保使用 open 模式

       }



       connectedCallback() {

           this.shadowRoot.innerHTML = 

               <style>

                   :host {

                       display: block;

                   }

                   .table-header {

                       color: var(--header-color, black); /* 默认颜色 */

                   }

                   .table-row {

                       border: var(--row-border, none); /* 默认无边框 */

                   }

               </style>

               <div class="table-header" part="header">Header</div>

               <div class="table-row" part="row">Row</div>

           ;

       }

   }

   customElements.define('my-table', MyTable);

2. 在父组件中通过 CSS 定义变量或使用 ::part：

my-table {

       --header-color: red; /* 修改 header 的颜色 */

       --row-border: 1px solid #ccc; /* 修改 row 的边框 */

   }



   /* 或者使用 ::part */

   my-table::part(header) {

       color: blue;

   }



   my-table::part(row) {

       border: 2px dashed green;

   }

这种方式的好处是把样式控制权交给父组件，同时保持 Web Component 的独立性。

---

#### 方法 2：关闭 Shadow DOM
如果你不需要 Shadow DOM 的样式隔离特性，可以在创建 my-table 时关闭它。

class MyTable extends HTMLElement {

    constructor() {

        super();

        // 不使用 shadowRoot，直接操作 light DOM

        this.innerHTML = 

            <style>

                .table-header { color: black; }

                .table-row { border: none; }

            </style>

            <div class="table-header">Header</div>

            <div class="table-row">Row</div>

        ;

    }

}

customElements.define('my-table', MyTable);

这样一来，my-table 的内容就变成了普通的 HTML 元素，外部样式可以直接生效。但这种做法会失去 Shadow DOM 带来的封装性，需要根据项目需求权衡。

---

#### 方法 3：动态注入样式
如果 Web Component 必须保留 Shadow DOM，但又需要从外部传入样式，可以通过 JavaScript 动态注入。

1. 在父组件中准备样式：

<template>

       <my-table ref="myTable"></my-table>

   </template>



   <script>

   import { onMounted } from 'vue';



   export default {

       setup() {

           onMounted(() => {

               const style = document.createElement('style');

               style.textContent = 

                   .table-header { color: red; }

                   .table-row { border: 1px solid #ccc; }

               ;

               // 将样式注入到 my-table 的 shadowRoot

               this.$refs.myTable.shadowRoot.appendChild(style);

           });

       }

   };

   </script>

2. 注意事项：
- 这种方法适合少量动态样式，但如果样式复杂，维护成本会变高。
- 要确保 my-table 已经渲染完成后再注入样式。

---

### 总结

- 如果你想保持 Web Component 的封装性，推荐使用 **方法 1**（:host 和 part）。
- 如果你不在乎封装性，可以选择 **方法 2**（关闭 Shadow DOM）。
- 如果你需要动态修改样式，可以用 **方法 3**（动态注入）。

实际开发中，我更倾向于方法 1，因为它既灵活又优雅，而且符合 Web Components 的设计哲学。至于 /deep/ 和 ::v-deep，还是别指望它们能穿透 Shadow DOM 了，认命吧 😂