如何让Stencil.js Web组件无需用户交互自动插入DOM？

问题 #

我开发了一个小型Stencil.js组件，已发布至npm并生成了CDN链接。常规使用方式是复制带CDN链接的脚本，再在HTML中通过标签名插入组件：

<script type="module" src="https://cdn.jsdelivr.net/npm/something-feedback@0.0.23/dist/feedback-widget/feedback-widget.esm.js" defer></script>

<ifx-feedback-widget app-name="Some App Name"></ifx-feedback-widget>

我希望无需在HTML中编写组件标签，让组件在脚本执行时自动插入DOM。目前我仅知晓手动创建并插入组件的方法：

<script>
  const myComponent = document.createElement('ifx-feedback-widget')
  document.body.appendChild(myComponent)
</script>

但我不想手动执行此操作，请问是否存在无需额外用户操作、脚本执行时自动插入DOM的方法？

解决方案 #

有两种可行方案，无需用户额外编写代码，就能让组件在脚本加载时自动插入DOM：

方案1：在组件源码中添加自动初始化逻辑 #

直接在你的Stencil组件文件（比如feedback-widget.tsx）末尾添加模块加载时执行的代码，自动创建并插入组件：

import { Component, Prop, h } from '@stencil/core';

@Component({
  tag: 'ifx-feedback-widget',
  styleUrl: 'feedback-widget.css',
  shadow: true,
})
export class FeedbackWidget {
  @Prop() appName: string = 'Default App Name';

  // 你的组件其他逻辑...
}

// 模块加载完成后自动执行
if (typeof window !== 'undefined') {
  // 避免重复创建组件
  if (!document.querySelector('ifx-feedback-widget')) {
    const widget = document.createElement('ifx-feedback-widget');
    
    // 支持用户通过全局变量配置参数
    const globalConfig = (window as any).feedbackWidgetConfig || {};
    if (globalConfig.appName) {
      widget.appName = globalConfig.appName;
    }
    
    document.body.appendChild(widget);
  }
}

打包后，用户只需引入CDN脚本即可，无需手动添加组件标签。如果需要自定义配置，用户可以在引入脚本前定义全局变量：

<script>
  window.feedbackWidgetConfig = { appName: 'My Custom App' };
</script>
<script type="module" src="https://cdn.jsdelivr.net/npm/something-feedback@0.0.23/dist/feedback-widget/feedback-widget.esm.js" defer></script>

方案2：修改Stencil打包配置，自定义入口脚本 #

如果不想修改组件源码，可以创建一个自定义入口文件，把自动插入逻辑放在其中：

1. 在项目src目录下新建entry.ts文件：

// 导入你的组件
import './components/feedback-widget/feedback-widget';

// 自动插入组件逻辑
if (typeof window !== 'undefined') {
  if (!document.querySelector('ifx-feedback-widget')) {
    const widget = document.createElement('ifx-feedback-widget');
    // 同样支持全局配置
    const globalConfig = (window as any).feedbackWidgetConfig || {};
    widget.appName = globalConfig.appName || 'Default App Name';
    document.body.appendChild(widget);
  }
}

2. 修改stencil.config.ts，指定自定义入口文件：

import { Config } from '@stencil/core';

export const config: Config = {
  namespace: 'feedback-widget',
  entryFile: 'src/entry.ts', // 新增这行
  outputTargets: [
    // 你的输出配置...
  ],
};

重新打包发布后，用户引入CDN脚本时，组件就会自动插入DOM。

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