Estoy creando widgets de JavaScript que se supone que deben agregarse a los sitios web de otras personas.
Personalizo mis widgets agregando dinámicamente un CSS a las páginas en las que se encuentran.
Por ejemplo,
Mi código CSS a continuación se aplica a un DIV dentro de mi widget:
.myWidget { background-color: red; }Pero un archivo CSS fuera del mío en una página remota podría tener:
div { border: 5px solid green; }El CSS anterior también se aplicaría a mis widgets. ¿Cómo puedo deshabilitar todos los demás CSS fuera del mío?
Gracias
Podrías estar usando shadow DOM
Documentos web de Shadow DOM MDN
Un aspecto importante de los componentes web es la encapsulación: poder mantener la estructura, el estilo y el comportamiento del marcado ocultos y separados de otros códigos en la página para que las diferentes partes no entren en conflicto y el código se pueda mantener limpio y ordenado. La API Shadow DOM es una parte clave de esto, ya que proporciona una forma de adjuntar un DOM separado oculto a un elemento.
Puede utilizar la propiedad abreviada all y la palabra clave unset para establecer el valor de cada propiedad en su valor inicial.
.myWidget { all:unset; background-color: red; } div { background-color:yellow; } <div class="myWidget">Hello World!</div>