" %}
📁 HTML
```html
The document has one marble:
.
The HTML parser instantiates two more marbles:
.
How many marbles does the document contain now?
```
📁 JS
```javascript
// define custom element:
customElements.define("inline-circle", class extends HTMLElement {
// 🔸 when inserted into document.
connectedCallback() {
// styles for circles
// ⭐️ demo only: don't do this in real apps.
this.style.display = "inline-block";
this.style.borderRadius = "50%";
this.style.border = "solid black 1px";
this.style.transform = "translateY(10%)";
// default size
if (!this.size) this.size = "0.8em";
}
// 🔸 observed attributesstatic
get observedAttributes() { return ["size", "color"]; }
// 🔸 when one of the attributes listed above changes.
attributeChangedCallback(name, oldValue, newValue) {
switch (name) {
case "size":
this.style.width = newValue;
this.style.height = newValue;
break;
case "color":
this.style.backgroundColor = newValue;
break;
}
}
// 🔸 getter/setter for element's attributes.
get size() { return this.getAttribute("size"); }
set size(size) { this.setAttribute("size", size); }
get color() { return this.getAttribute("color"); }
set color(color) { this.setAttribute("color", color); }
});
```
{% endtab %}
{% endtabs %}
## Valid Custom Element Name
{% hint style="info" %}
* 開頭：\[a-z] ⭐️
* 接著：\[0-9], \[a-z], "**`-`**", "**`.`**", "**`_`**" (optional)
* 中間一定要有："**`-`**" ⭐️
* 接著：\[0-9], \[a-z], "**`-`**", "**`.`**", "**`_`**" (optional)
{% endhint %}
{% hint style="info" %}
\ 或 \ ❓(這兩個都是合法的名字)
{% endhint %}
```javascript
PotentialCustomElementName ::=
[a-z] (PCENChar)* '-' (PCENChar)*
PCENChar ::=
"-" | "." | [0-9] | "_" | [a-z] | #xB7 |
[#xC0-#xD6] | [#xD8-#xF6] | [#xF8-#x37D] | [#x37F-#x1FFF] |
[#x200C-#x200D] | [#x203F-#x2040] | [#x2070-#x218F] |
[#x2C00-#x2FEF] | [#x3001-#xD7FF] | [#xF900-#xFDCF] |
[#xFDF0-#xFFFD] | [#x10000-#xEFFFF]
```
## Register New Tag Name
We can create our tags by using the [CustomElementRegistry](https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry) object (`window.customElements`).
{% hint style="danger" %}
* **custom element names** must contain a **hyphen**:exclamation: \
📘 customElements.[define](https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry/define#parameters)()
* Custom elements **cannot** be **self-closing** because HTML only allows [a few elements](https://html.spec.whatwg.org/multipage/syntax.html#void-elements) to be self-closing. Always write a closing tag\
(``)\
📘 Google ⟩ [Custom Elements](https://developers.google.com/web/fundamentals/web-components/customelements#jsapi)
{% endhint %}
```javascript
// ⭐️ custom tag
// ⭐️ custom element names must contain a "hyphen".
customElements.define('my-component', MyComponent);
```
## Supporting Class
To create a custom element, we need to tell the browser several details about it: **how to show it**, **what to do** when the element is **added** or **removed** to page, etc.
```javascript
class MyComponent extends HTMLElement {
constructor() {
super();
// ...
}
// triggered when added to the document
connectedCallback() {}
// triggered when removed from the document
disconnectedCallback() {}
// attribute names to monitor for changes
static get observedAttributes() {
return [ /* ... */ ];
}
// triggered when one of attributes listed above is modified.
// doesn’t trigger for unlisted attributes (for performance reasons).
attributeChangedCallback(name, oldValue, newValue) {}
// called when moved to a new document
// happens in document.adoptNode, very rarely used
adoptedCallback() {}
// other methods and properties ...
}
```