在Svelte的contenteditable div中渲染自定义Web组件失败求助

核心问题 #

你当前是把包含自定义元素的HTML字符串直接作为文本内容插入到contenteditable中，浏览器会自动转义HTML标签，导致<source-token>被当成纯文本显示，而非解析为自定义组件。同时，直接操作字符串替换的方式无法触发自定义元素的初始化。

具体修复步骤 #

1. 正确创建自定义元素节点
   不要通过字符串拼接生成HTML，而是用原生DOM API创建<source-token>元素：

   const token = document.createElement('source-token');
   token.setAttribute('type', 'ambiguity');
   token.textContent = 'test';
   

2. 替换文本节点为真实DOM元素
   在处理contenteditable内容时，需要定位到包含"test"的文本节点，将其替换为创建好的自定义元素。示例逻辑调整：

   function handleInput() {
     const div = document.getElementById('editable');
     // 遍历子节点，找到文本节点进行替换
     Array.from(div.childNodes).forEach(node => {
       if (node.nodeType === Node.TEXT_NODE && node.textContent.includes('test')) {
         const parts = node.textContent.split('test');
         const fragment = document.createDocumentFragment();
         parts.forEach((part, index) => {
           if (part) fragment.appendChild(document.createTextNode(part));
           if (index < parts.length - 1) {
             const token = document.createElement('source-token');
             token.setAttribute('type', 'ambiguity');
             token.textContent = 'test';
             fragment.appendChild(token);
           }
         });
         node.replaceWith(fragment);
       }
     });
   }
   

3. 确保自定义元素已正确注册
   确认Token.svelte中已配置为自定义元素：

   <script>
     export let type;
   </script>
   
   <span class:ambiguity={type === 'ambiguity'}>
     <slot />
   </span>
   
   <style>
     .ambiguity { color: red; }
   </style>
   

   并在主组件中注册：

   import Token from './Token.svelte';
   customElements.define('source-token', Token);
   

关键注意事项 #

• contenteditable元素中直接设置innerHTML虽然能解析HTML，但存在XSS风险，且需要确保自定义元素已注册完成后再插入。
• 使用DOM API创建元素并替换文本节点，能保证自定义元素被正确初始化和渲染。

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