如何在Vue3+Vite中使用Stencil.js构建的Web Component？选哪个文件夹？

应该使用哪个文件夹？ #

执行npm run build后生成的dist文件夹是你需要在Vue3项目中使用的核心产物，里面包含了可被外部项目引入的Web Component定义文件、样式和资源。而www文件夹是Stencil用于本地预览组件的演示站点构建结果，仅用于开发阶段验证组件功能，不需要在Vue项目中引入。

最佳实践 #

• 组件引入方式
  优先把Stencil组件库发布为npm包，在Vue3项目中通过npm install安装后直接引入；本地开发调试时，可以用npm link建立本地依赖关联，或者直接将dist文件夹内的组件包文件复制到Vue项目的public/vendor这类静态资源目录。
• Vue3中配置Web Component支持
  在Vue项目入口文件（比如main.js）中导入Stencil生成的loader并初始化组件：

  import { defineCustomElements } from 'your-component-lib/loader';
  
  defineCustomElements(window);
  

  同时要让Vue忽略对Web Component标签的编译，避免把它们当成普通Vue组件处理：
  • Vue CLI项目：在vue.config.js添加配置

    module.exports = {
      chainWebpack: config => {
        config.module
          .rule('vue')
          .use('vue-loader')
          .tap(options => {
            options.compilerOptions = {
              ...options.compilerOptions,
              // 替换成你的组件前缀，比如自定义组件都以"my-"开头
              isCustomElement: tag => tag.startsWith('my-')
            }
            return options
          })
      }
    }
    

  • Vite项目：在vite.config.js添加配置

    import { defineConfig } from 'vite'
    import vue from '@vitejs/plugin-vue'
    
    export default defineConfig({
      plugins: [vue({
        template: {
          compilerOptions: {
            isCustomElement: tag => tag.startsWith('my-')
          }
        }
      })]
    })
    

• 数据绑定与事件处理
  • 组件属性绑定：用Vue的语法绑定Web Component的属性，注意属性名要和Stencil定义的一致（一般是短横线分隔的格式）：

    <my-button :button-text="vuePageText"></my-button>
    

  • 自定义事件监听：用Vue的v-on（或@）语法监听组件抛出的自定义事件：

    <my-input @value-change="handleInputChange"></my-input>
    

• 样式定制
  Stencil组件默认用Shadow DOM做样式隔离，不会和Vue项目的样式冲突。如果要修改组件样式，优先用组件暴露的CSS变量（自定义属性）来定制，别直接操作Shadow DOM内部样式，这样更符合组件设计规范。
• 开发调试技巧
  本地开发时可以同时启动Stencil的开发服务器（npm run start）和Vue项目的开发服务器，实现组件修改的热更新预览；调试时直接用浏览器开发者工具查看Shadow DOM结构、组件属性和事件触发情况，定位问题更高效。

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