" %}
📁 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 ...
}
```
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://lochiwei.gitbook.io/web/component/custom-element.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.