HTML Custom Elements & valid name

HTML Custom Elements & valid name

valid custom element name

https://html.spec.whatwg.org/multipage/custom-elements.html#valid-custom-element-name

https://html.spec.whatwg.org/multipage/custom-elements.html#prod-potentialcustomelementname

Potential Custom Element Name 潜在的自定义元素名称

https://html.spec.whatwg.org/multipage/custom-elements.html#prod-pcenchar

hyphen-containing 连字符

emoji support

<🛸-element>customElements.define("🛸-element", UFO);</🛸-element>

<element-🛸>customElements.define("element-🛸", UFO);</element-🛸>

<custom-element-🛸>customElements.define("custom-element-🛸", UFO);</custom-element-🛸>

class UFO extends HTMLElement {
  // 
}
customElements.define("🛸-element", UFO);


class UFO_EMOJI extends HTMLElement {
  // 
}
customElements.define("element-🛸", UFO_EMOJI);


class CE_UFO extends HTMLElement {
  // 
}
customElements.define("custom-element-🛸", CE_UFO);

Custom Elements 命名规范

https://www.w3.org/TR/xml/#sec-notation

https://html.spec.whatwg.org/multipage/references.html#refsXML

https://html.spec.whatwg.org/multipage/infrastructure.html#other-applicable-specifications

demo

// 注册
class UFO extends HTMLElement {
  // 
}
// 定义
customElements.define("ufo-element", UFO);

// customElements.define("ufo", UFO);
// Uncaught SyntaxError: Failed to execute 'define' on 'CustomElementRegistry': "ufo" is not a valid custom element name 

https://cdn.xgqfrms.xyz/web-components/webcomponents-loader.js

refs

---

---

©xgqfrms 2012-2020

www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！

---