Javascript 检测缺少HTML自定义元素

是否有一种方法可以检测您是否试图包含一个不存在的自定义元素

我正在使用LitElement（Polymer），我希望能够在尝试使用不存在的自定义元素时进行检测，理想的情况是在使用时抛出一个错误

默认行为似乎只是耸耸肩，而不是真正渲染任何内容，这使得它很容易丢失，特别是对于琐碎的元素。最常见的原因是忘记导入带有自定义元素声明的文件

我知道未知元素是type

HTMLElement

，我可以遍历所有树来找到它们：

const findunnown=node=>{
const self=node.constructor==HTMLElement；
const shadowRoot=node.shadowRoot&&findunnown（node.shadowRoot）；
const children=Array.from（node.children）.reduce（（r，child）=>
r、 concat（findunnown（child）），[]；
返回（自身？[节点]：[]）
.concat（shadowRoot | |[]）
.concat（儿童| |[]）；
};
常量未知=findUnknown（文件）；
console.log（未知）

好

坏的
也很好

也不好
您可以创建一个有效HTML和自定义元素的白名单，并对照该白名单检查
nodeName
。不是很好（因此评论），但是HTML规范中确实有元素的索引，你可以很容易地获取。这就是我现在讨论的方法。我的自定义元素都不是HTMLElement，而是其他东西，所以我只需要将我使用的语义HTML5元素列入白名单。手工维护还不错。你能检查一下标签名吗？自定义元素的名称中必须有连字符，这样您就可以过滤掉没有连字符的任何内容。似乎比构建自己的白名单更简单。问题是许多自定义元素将是有效的，因为我实现了它们。目标是找到我没有实现的自定义元素。此外，我只是在使用它们时添加到白名单中。到目前为止，我有3个元素，所以还不错。此外，如果我添加了一个名为“onewordoops”的元素，我希望将其检测为未实现，即使它缺少连字符。