如何在Salesforce Lightning Web Component中添加自定义HTML标签？

一、LWC（Lightning Web Component）场景 #

加载自定义JS文件 #

LWC禁止直接在模板中使用<script>标签，必须通过lightning/platformResourceLoader的loadScriptAPI动态加载静态资源中的JS文件：

import { LightningElement } from 'lwc';
import { loadScript } from 'lightning/platformResourceLoader';
// 引入上传好的静态资源（customWebComponentJS是你上传的JS资源名称）
import CUSTOM_WC_JS from '@salesforce/resourceUrl/customWebComponentJS';

export default class CustomWCWrapper extends LightningElement {
    jsLoaded = false;

    renderedCallback() {
        if (this.jsLoaded) return;
        this.jsLoaded = true;
        
        loadScript(this, CUSTOM_WC_JS)
            .then(() => this.initCustomWebComponent())
            .catch(err => console.error('自定义JS加载失败:', err));
    }

    initCustomWebComponent() {
        // 动态创建自定义Web Component元素并插入DOM
        const customWC = document.createElement('my-custom-web-component');
        // 可自定义元素属性
        customWC.setAttribute('data-param', 'demo-value');
        // 将元素添加到模板中的容器
        this.template.querySelector('.wc-host').appendChild(customWC);
    }
}

对应的LWC模板（.html文件）：

<template>
    <!-- 作为自定义Web Component的宿主容器 -->
    <div class="wc-host"></div>
</template>

自定义HTML标签的处理 #

LWC模板只支持白名单内的HTML标签和Salesforce自有组件，直接写自定义标签会被编译移除，必须通过JS动态创建并插入DOM，如上例所示。

二、Aura组件（.cmp文件）场景 #

引入自定义JS文件 #

使用<ltng:require>标签加载静态资源中的JS，并在脚本加载完成后初始化：

<aura:component implements="flexipage:availableForAllPageTypes">
    <!-- 加载静态资源中的自定义JS -->
    <ltng:require scripts="{!$Resource.customWebComponentJS}" 
                  afterScriptsLoaded="{!c.initializeCustomWC}"/>
    <!-- 自定义Web Component的宿主容器 -->
    <div aura:id="wcContainer"></div>
</aura:component>

对应的Aura控制器（.js文件）：

({
    initializeCustomWC: function(component, event, helper) {
        const container = component.find('wcContainer').getElement();
        const customWC = document.createElement('my-custom-web-component');
        container.appendChild(customWC);
    }
})

自定义HTML标签的限制 #

Aura组件的.cmp模板同样不支持直接写入自定义标签，必须通过JS动态创建元素后插入DOM容器。

核心注意事项 #

• CSP配置：确保自定义JS资源的域名在Salesforce的**内容安全策略（CSP）**中被信任，否则脚本会被拦截。
• Locker Service：Lightning Locker会隔离组件DOM，动态创建的元素必须插入当前组件的DOM范围内，禁止跨组件DOM操作。
• 兼容性：自定义Web Component需避免使用Locker Service限制的API（如eval、修改原生原型等），确保在Salesforce环境中正常运行。

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