未注册的 HTML 自定义元素和注册的 HTML 自定义元素有什么区别？

Question

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

• 使用CSS设置未注册元素的样式

• 使用JS将事件添加到未注册的元素等

例子：

// REGISTER <my-custom-element-1>

class MyRegisteredCustomElement1 extends HTMLElement {

  constructor() {

    super();

  }

};

customElements.define('my-custom-element-1', MyRegisteredCustomElement1);

// ATTACH EVENT LISTENERS TO BOTH CUSTOM ELEMENTS

const myCustomElement1 = document.getElementsByTagName('my-custom-element-1')[0];

const myCustomElement2 = document.getElementsByTagName('my-custom-element-2')[0];

const customElementAlert = (e) => {

  switch (e.target.nodeName.toLowerCase()) {

  

    case ('my-custom-element-1') : console.log('I\'m a registered custom element and I can be scripted and styled.'); break;

    case ('my-custom-element-2') : console.log('I\'m an unregistered custom element. Nevertheless, I can be scripted and styled TOO.'); break;

  }

}

myCustomElement1.addEventListener('click', customElementAlert, false);

myCustomElement2.addEventListener('click', customElementAlert, false);

:not(:defined) {

  border: 1px dashed rgb(0, 0, 0);

}

my-custom-element-1,

my-custom-element-2 {

  float: left;

  display: inline-block;

  width: 100px;

  height: 100px;

  margin-right: 12px;

  padding: 6px;

  text-align: center;

  font-weight: bold;

  cursor: pointer;

}

my-custom-element-1 {

  color: rgb(255, 255, 255);

  background-color: rgb(255, 0, 0);

}

my-custom-element-1::after {

  content: 'I\'m a registered custom element.\A CLICK ME';

}

my-custom-element-2 {

  background-color: rgb(255, 255, 0);

}

my-custom-element-2::after {

  content: 'I\'m an unregistered custom element.\A CLICK ME';

}

<my-custom-element-1></my-custom-element-1>

<my-custom-element-2></my-custom-element-2>

如果未注册的自定义元素可以设置样式和脚本，那么注册自定义元素具体可以实现什么功能？

Answer 1

基本上，它将元素与您为其设置的类相关联。它：允许使用生命周期回调，例如connectedCallback(和disconnectedCallback)允许在构造函数中自定义逻辑和属性。您创建的元素my-custom-element-2只是一个常规 HTML 元素，没有您为其指定的特定类。my-custom-element-2如果你检查 DOM，你会看到is的类，而isHTMLElement的类。my-custom-element-1myRegisteredCustomElement1