Vue 3：在使用自定义元素时禁用 shadow dom

Question

我想在非 vue 应用程序中添加 custom element。

为此，我创建了一个经典的 SFC：

//test.ce.vue
<template>
    <div class="text-primary">Test</div>
</template>

<script>
export default {
    name: 'test',
};
</script>

<style>
    .text-primary {
        color: red;
    }

</style>

然后是一个主脚本：

//app.js
import Test from 'test.ce.vue';
const testElement = defineCustomElement(Test);
customElements.define('test-element', testElement);

document.body.appendChild(document.createElement('test-element'));

随着 shadow dom 元素的创建，一切正常运行：

<test-component>
    #shadow-root (open)
        <style>
            .text-primary {
                color: red;
            }
        </style>
        <div class="text-primary">Test</div>
</test-component>

我想避免在组件中重新定义 .text-primary 类，因为该类已经在主 css 文件中定义。我也不需要只为这个组件定义特定的类，所以换句话说，我想像经典的custom element 那样删除影子 dom。

所以基本上，渲染这个：

<test-component>
    <div class="text-primary">Test</div>
</test-component>

是否有任何选项可以在 vue 中定义以允许这样做？

Answer 1

您使用 Vue 作为工具来创建 Web 组件，但为什么要使用工具而不是原生技术？
工具并不好；工具只会在执行任务时更快。
在您的情况下，该工具会执行您不希望它执行的操作。

使用原生 Web 组件技术，您只需要：

<style>
  .text-primary {
    color: red;
  }
</style>

<test-component></test-component>

<script>
  customElements.define("test-component", class extends HTMLElement {
    connectedCallback() {
      this.innerHTML = `<div class="text-primary">Test</div>`;
    }
  })
</script>