Javascript 什么'；未注册的HTML自定义元素和已注册的HTML自定义元素之间的区别是什么？

如果我未能注册自定义元素，我注意到我仍然可以：

• 使用CSS设置未注册元素的样式
• 使用JS将事件添加到未注册的元素等

示例：

//寄存器
类MyRegisteredCustomElement1扩展了HtmleElement{
构造函数（）{
超级（）；
}
};
定义（'my-custom-element-1'，MyRegisteredCustomElement1）；
//将事件侦听器附加到两个自定义元素
const myCustomElement1=document.getElementsByTagName（'my-custom-element-1'）[0]；
const myCustomElement2=document.getElementsByTagName（'my-custom-element-2'）[0]；
常量customElementAlert=（e）=>{
开关（e.target.nodeName.toLowerCase（））{
case（'my-custom-element-1'）：console.log（'I'是注册的自定义元素，可以编写脚本并设置样式'）；break；
case（'my-custom-element-2'）：console.log（'我是一个未注册的自定义元素。不过，我也可以编写脚本并设置样式'）；break；
}
}
myCustomElement1.addEventListener（'click'，customElementAlert，false）；
myCustomElement2.addEventListener（'click'，customElementAlert，false）
：未（：已定义）{
边框：1px虚线rgb（0,0,0）；
}
my-custom-element-1，
my-custom-element-2{
浮动：左；
显示：内联块；
宽度：100px；
高度：100px；
右边距：12px；
填充：6px；
文本对齐：居中；
字体大小：粗体；
光标：指针；
}
my-custom-element-1{
颜色：rgb（255、255、255）；
背景色：rgb（255,0,0）；
}
my-custom-element-1:：after{
内容：“我是一个注册的自定义元素。\a单击我”；
}
my-custom-element-2{
背景色：rgb（255，255，0）；
}
my-custom-element-2:：after{
内容：“我是一个未注册的自定义元素。\A单击我”；
}
基本上，它将元素与为其设置的类相关联。它：


允许使用生命周期回调，如（和
disconnectedCallback
）
允许在构造函数中自定义逻辑和属性

您创建的
my-custom-element-2
元素只是一个常规的HTML元素，没有指定的类。如果您检查DOM，您将看到
my-custom-element-2
的类是
HTMLElement
，而
my-custom-element-1
的类是
myRegisteredCustomElement1
“使用CSS设置未注册元素的样式”只是FWIW，这在IE9中不适用，您必须玩一次类似于执行
document.createElement（“my-custom-element-2”）
的游戏，才能让它意识到标记是一个元素。但是IE9已经过时了，IE11中使用了关于“未知”元素的CSS（它只是过时的，而不是过时的；-）。我看到您使用了
getElementsByTagName
（oldskool[除非您需要实时节点列表]，因为自从IE9以来，
.querySelector
）。为了节省你的头发拉扯；记下一句话：活节点主义者不在阴影中工作。所以你不能这样做：
this.shadowRoot.getElementsByTagName（）
这也可能有帮助：@Rounin好吧，就功能而言基本上“没有”。在功能方面，重要的事情是阴影DOM和作用域CSS，这两种方式都是可能的。很容易看到，因为自定义元素有多边形填充。然而，编写像React的componentDidMount（或useEffect）这样的
connectedCallback
方法要比在元素连接时手动检查容易得多，调试更容易，因为组件类更清晰等等。好吧，使用钩子（如
connectedCallback
）方便得多与JavaScript类相比，填充内容和手动触发挂钩更容易实现心智模型。个人而言，我避免Web组件，并认为它是较低级别的构建原语，喜欢像VUE之类的框架，并且在实践中更常见。我只是有很多经验，因为我在一家测试公司（Testim）工作，那里有很多客户机使用自定义元素和影子DOM，包括一些自己实现它的客户机（比如Salesforce）。不要称它为“未注册的自定义元素”，这意味着它与自定义元素有关系，事实并非如此。只有在使用自定义元素API时，它才会成为自定义元素。您也不会调用未通过设置“未注册集”的数组。或者一堆砖头一个“未建造的房子”按规格正确：“一个元素的自定义元素状态是“未定义的”、“失败的”、“未自定义的”、“预自定义的”或“自定义的”。自定义元素状态为“未自定义的”或“自定义”的元素称为已定义。自定义元素状态为“自定义”的元素称为自定义的。”-自定义元素状态通过定义元素来设置。