如何在自定义HTML模板中访问并渲染跨组件的自定义标签内容？

核心逻辑 #

• 把c-text里的所有节点（文本、自定义组件、普通HTML）全部提取出来
• 按原有顺序重新拼接这些节点，确保自定义组件和文本能一同渲染
• 用白名单管理所有需要处理的自定义组件，后续新增组件直接追加即可

具体代码实现 #

1. 维护自定义组件白名单 #

把需要处理的组件标签名写在这里，以后加新组件直接往里加：

const customComponents = ['c-icon', 'c-badge']; // 比如新增c-badge直接丢进数组

2. 通用处理函数 #

专门处理单个c-text元素，整合内部的自定义组件与文本：

function processCText(textElement) {
  const childNodes = Array.from(textElement.childNodes);
  const fragment = document.createDocumentFragment();

  childNodes.forEach(node => {
    // 判断是否为需要处理的自定义组件
    if (node.nodeType === Node.ELEMENT_NODE && customComponents.includes(node.tagName.toLowerCase())) {
      fragment.appendChild(node.cloneNode(true));
    } else if (node.nodeType === Node.TEXT_NODE) {
      // 文本节点直接转为可插入的文本对象
      fragment.appendChild(document.createTextNode(node.textContent));
    } else {
      // 普通HTML元素直接克隆插入
      fragment.appendChild(node.cloneNode(true));
    }
  });

  // 清空原元素，塞入处理好的内容
  textElement.innerHTML = '';
  textElement.appendChild(fragment);
}

3. 批量处理页面所有c-text #

document.querySelectorAll('c-text').forEach(processCText);

新增组件的适配方法 #

以后要加c-badge或其他自定义组件，只需要两步：

1. 把新组件的标签名（小写）添加到customComponents数组中
2. 如果新组件有特殊逻辑（比如需要初始化事件、修改样式），在processCText里加对应判断处理就行

注意事项 #

• 如果自定义组件绑定了事件或有动态数据，克隆节点后需要重新初始化这些逻辑，可在插入片段后调用组件的初始化方法
• 如果需要修改组件内容（比如给c-icon加额外类名），可以在克隆节点后、插入片段前做调整

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