如何解决Phoenix Code中‘...不是有效元素名称(element-name)’报错？

针对你遇到的Phoenix Code误报自定义元素名称无效的问题，可尝试以下几种方法清理错误列表：

• 提前声明自定义元素
  在HTML头部添加自定义元素的定义脚本，让编辑器校验器识别这是合法的自定义元素：

  <script>
    // 定义自定义元素类
    class MyCustomTag extends HTMLElement {}
    // 注册自定义元素
    customElements.define('my-custom-tag', MyCustomTag);
  </script>
  

  即使你已有外部JS处理自定义元素，添加这段声明也能让Phoenix Code的校验逻辑认可元素名称的合法性。

• 禁用特定校验规则
  进入Phoenix Code的设置面板，搜索与element-name相关的HTML校验规则，将该规则的报错级别调整为「警告」或直接关闭。一般在「语言设置」→「HTML」→「校验规则」路径中能找到对应选项。

• 使用is属性兼容写法
  若不想修改现有自定义元素的结构，可改用原生元素加is属性的方式：

  <div is="my-custom-tag"></div>
  

  这种写法符合HTML5规范，同时更易被编辑器的校验逻辑接受，不会影响页面的CSS和JS交互效果。

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