自定义元素获取内容的合规性及Vite编译异常问题咨询

组件示例用法 #

<fs-highlight data-line-numbers="true" data-language="html">
   any content here ....
</fs-highlight>

原型实现代码 #

this._code = hljs.highlight(this.innerHTML.replace(/^\s+/g, ''), {
        language: this.language,
      }).value;

疑问1：使用this.innerHTML获取内容是否正确合规？ #

• 从Web组件规范来说，用this.innerHTML获取内容是合规的，但存在几个关键问题需要注意：
  • 若组件内部有嵌套自定义元素或特殊HTML结构，innerHTML会返回解析后的DOM字符串，可能丢失原始未转义内容（比如用户写的<会被解析成标签而非文本），这对语法高亮是致命的——你需要的是原始代码文本，而非解析后的DOM。
  • 未使用Slot时，组件内部内容属于"Light DOM"，但后续若组件引入Shadow DOM，this.innerHTML只能读取Shadow DOM内的内容，无法获取外部传入的Light DOM内容，直接导致逻辑失效。
  • 更稳妥的方案是使用**<slot>**：通过<slot>接收外部内容，再用slot.assignedNodes()获取原始文本节点，能精准拿到用户传入的原始代码，避免解析丢失问题。

疑问2：StackBlitz中Vite编译失败是否仅由其编译机制导致？本地编译发布后该问题是否会消失？ #

• StackBlitz的Vite环境确实有特殊的编译、沙箱机制，比如自定义元素解析规则、ES模块处理方式和本地环境存在差异，部分本地正常的代码可能在StackBlitz中报错。
• 但不能直接认定问题完全由StackBlitz导致，建议先排查以下几点：
  1. 自定义元素注册是否符合规范（比如是否用customElements.define，类是否正确继承HTMLElement）。
  2. 确认hljs是否正确引入——StackBlitz对CDN引入或npm包的处理可能有差异，本地通过npm安装并正确打包的话，这类问题大概率不会出现。
  3. 代码中是否依赖StackBlitz沙箱不支持的API（比如部分受限的DOM API）。
• 若排查后确认是StackBlitz特有环境问题，本地编译发布后问题大概率会消失；但如果是代码本身的规范问题（比如自定义元素注册错误），本地编译也会出现相同问题。

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