0
157
VistasElemento HTML personalizado que se comporta como el elemento <div> incorporado
Quiero crear un elemento HTML personalizado que se comporte exactamente como el elemento <div> incorporado. Estoy tratando de evitar una sopa <div> . Por ejemplo, me gustaría tener un elemento <currency-list> . Este elemento debería comportarse exactamente como el elemento <div> . La única diferencia es el nombre. ¿Cómo puedo conseguir esto?
Gracias Yosemite
1 Respuestas
Responde la pregunta0
un DIV (HTMLDivElement ) es un elemento de block .
Pero ni siquiera necesita un elemento personalizado/componente web definido para crear un elemento de block
customElements.define("currency-list", class extends HTMLElement { connectedCallback() { this.style.display = "block"; } }); another-list { display: block; } body>*:defined { background: green; color: beige; } body>*:not(:defined) { background: lightgreen; } Line 1 <currency-list>Hello Web Component</currency-list> Line 3 <div>Line 4</div> Line 5 <another-list onclick="alert(this.constructor.name)">Line 6</another-list> Line 7
Notas:
<currency-list>es un "Elemento personalizado autónomo" (extends HTMLElement)Puede extender
HTMLDivElementen Chromium y FireFox, pero Apple ha declarado que nunca implementará "Elementos integrados personalizados"
De: https://github.com/WICG/webcomponents/issues/509
<another-list>es un HTMLUnknownElement ; no hay nada de malo en usarlo, suconstructores unHTMLElement, por lo que puede hacer todo lo que puede hacer unHTMLElement.
Para obtener más información sobre el valor de los elementos desconocidos, consulte mi publicación Dev.toPuede establecer cualquier valor de
displayde CSS en un DIV, no puede hacerlo en sus propios Elementos, ya que destruirá la configuración dedisplay:block.
PD. etiquete sus preguntas SO web-component y/o custom-element