0
109
ViewsActualizar un elemento a un elemento personalizado
Estoy tratando de actualizar un elemento normal a un elemento personalizado. Este ejemplo no funciona, así que tal vez esto no sea posible.
customElements.define('html-h1-heading-element', class extends HTMLHeadingElement { constructor() { super(); } connectedCallback() { console.log('Hello from custom element'); } }, { extends: 'h1' }); const el = document.querySelector('h1'); el.setAttribute('is', 'html-h1-heading-element'); console.log(el); <h1>Hello, world</h1>1 answers
Answer question0
Hay 3 tipos de Elementos:
Elementos estándar
Elementos personalizados autónomos (extendidos de HTMLElement)
Elementos integrados personalizados (se extienden de los elementos estándar)
El atributoisno es su atributo de elemento normal.
No puede cambiar/setAttribute("es",...) un elemento a otra cosa después de la definición.
El atributoisse usa cuando el analizador DOM crea el elemento, no en las mutaciones DOM.
Los elementos personalizados no son compatibles con Safari y Apple ha declarado que nunca lo serán.
fuente: https://github.com/WICG/webcomponents/issues/509
Puedes probar un Polyfill ,
o simplemente no usarlos, y adherirse a los Elementos Autónomos (extender HTMLElement).
Tenga en cuenta que todas las clases base, Lit, Hybrids, Stencil, etc., todas se extienden desde HTMLElement,
no hacen elementos incorporados personalizados
Si continúa con Elementos personalizados (que no funcionan en Safari), tenga en cuenta que:
document.body.append( document.createElement("IMG", { is: "white-queen" }) ); crea correctamente un elemento DOM incorporado personalizado ,
pero no establece el atributo is en el elemento DOM.
Entonces, si lo necesita como selector de CSS, debe configurarlo usted mismo explícitamente.
document.body.appendChild( document.createElement("IMG", { is: "white-queen" }) ).setAttribute("is", "white-queen"); Esto permite que el selector de CSS [is=*"white"] seleccione todas las piezas blancas. Lo cual no es posible con nombres de etiquetas parciales .
Todos mis experimentos en: https://chessmeister.github.io/
Desde entonces nunca he usado elementos integrados personalizados.