define() Hay dos tipos de elementos personalizados que se pueden crear:
- Elemento personalizado autónomo: estos elementos no se heredan de los elementos HTML integrados.
- Elemento integrado personalizado: estos elementos se heredan de elementos HTML integrados.
Sintaxis:
customElements.define( name, constructor, options );
Parámetros:
- nombre: Especifica el nombre del nuevo elemento personalizado. El nombre de los elementos personalizados debe contener un guión.
- constructor: especifica el constructor del nuevo elemento personalizado.
- opciones: Especifica el objeto que controla cómo se define el elemento. Es un parámetro opcional.
Valor devuelto: este método devuelve vacío.
Ejemplo: En este ejemplo, se define un elemento personalizado, llamado <gfg-custom-element> con un constructor llamado CustomEl utilizando este método.
HTML
<!DOCTYPE HTML>
<html>
<body style="text-align:center;">
<h1 style="color:green;">
GeeksforGeeks
</h1>
<p>
HTML | customElements define() method
</p>
<button onclick="Geeks();">
click here
</button>
<p id="arr"></p>
<script>
var arr =
document.getElementById("arr");
// Function to define the element
function Geeks() {
class CustomEl extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });
this.shadowRoot.innerHTML = `
<h1 style="color:green;">
GeeksforGeeks Custom
Element Data
</h1>
`;
}
}
// Use the define() method to define
// a new element
window.customElements.define(
'gfg-custom-element', CustomEl);
}
</script>
<gfg-custom-element></gfg-custom-element>
</body>
</html>
Producción:
-
Antes de hacer clic en el botón:
-
Después de hacer clic en el botón:
Navegadores compatibles:
- Google Chrome 66.0
- Borde 79.0
- Firefox 63.0
- Safari 10.1
- Ópera 53.0