Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

230
Vistas
shadow dom no se adjunta a la clase que hereda de HTMLButtonElement

Estoy tratando de adjuntar shadow dom a esto, pero no se adjunta y da un error. La operación DOMExpection no es compatible, pero cuando se hereda de HTMLElement o HTMLSpanElement, ¡funciona! Entonces, la pregunta es: ¿puedo adjuntar shadow dom a esto cuando heredo de HTMLButtonElement si es así, entonces de qué otra manera no por qué? aquí está mi código: -

 class Home_Button extends HTMLButtonElement { constructor() { super(); this._dom = this.attachShadow({ mode: "open" }); this.createButton(); } createButton() { this.classList.add("contents"); const style = document.createElement("style"); style.textContent = ` .sentToHome{ margin: 1%; padding: 1%; border-radius: 5px; border: 1px solid black; } .homeLink{ text-decoration: none; color: green; } `; const anchor = document.createElement("a"); anchor.innerText = "<< Home"; anchor.setAttribute("href", "/"); anchor.setAttribute("class", "homeLink"); const button = document.createElement("button"); button.setAttribute("class", "sentToHome"); button.appendChild(anchor); this._dom.append(style, button); } } customElements.define("simple-btn", Home_Button, { extends: "button" }); const sentToHomeBtn = new Home_Button(); document.body.appendChild(sentToHomeBtn);
about 4 years ago · Juan Pablo Isaza
2 Respuestas
Responde la pregunta

0

Esto nunca funcionará en Safari, porque Apple, desde 2016, ha declarado que nunca implementará Elementos integrados personalizados, solo han implementado extends HTMLElement

Activar createButton desde connectedCallback ; no puede realizar operaciones DOM en el constructor (además del contenido shadowDOM) porque el elemento ( this ) aún no existe en el DOM.

También tenga en cuenta que this._dom no es necesario, obtiene this.shadowRoot gratis de attachShadow()

Para ser claros, this.classList es el problema

about 4 years ago · Juan Pablo Isaza Denunciar

0

Bueno, @danny-365csi-engelman también tiene razón, pero encontré esta respuesta.

De acuerdo con la respuesta, podemos adjuntar shadow dom en algunos elementos y el botón no sale en esos elementos.

Acabo de heredar de la clase HTMLElement en lugar de la clase HTMLButtonElement . Después de eso todo funciona bien!.

Si desea verificar el código fuente actual, vaya aquí.

about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda