<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" dir="ltr">
<head>
<meta charset="UTF-8"/>
<title>Custom Element Demo</title>
</head>
<body>
<andy-custom:menu></andy-custom:menu>
<script>
class AndyCustomMenu extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: "open" });
this.shadowRoot.innerHTML = `
<style>
div {
padding: 10px;
background: #eef;
border: 1px solid #99c;
font-family: sans-serif;
}
</style>
<div>Menu personalizzato</div>
`;
}
}
// Registrazione del custom element
customElements.define("andy-custom:menu", AndyCustomMenu);
</script>
</body>
</html>
Spec URL
https://html.spec.whatwg.org/multipage/custom-elements.html#valid-custom-element-name | https://dom.spec.whatwg.org/#valid-element-local-name
Test case