0
201
VistasCómo evitar que CSS se agregue automáticamente a la parte inferior del elemento principal
Un grupo de voluntarios ha creado un componente web de selección única/múltiple utilizando StencilJS: https://github.com/NothingAG/adg-components
Para este componente web, Shadow DOM no está habilitado para que los desarrolladores puedan anular/personalizar estilos.
Ahora queremos entregárselo al cliente para que lo utilice en su proyecto. Lo hacen así:
<script type="module" src="/build/adg-components.esm.js"></script> <script nomodule src="/build/adg-components.js"></script> <adg-combobox id="hobbies" name="hobbies" label="Please select your hobbies" optionslabel="Hobbies" multi="true" lang="de" ></adg-combobox> Sin embargo, lo que experimentan es que debido a que Shadow DOM no está habilitado, el CSS se adjunta automáticamente a la parte inferior de <head> , después de cualquier otro estilo:
Esto hace que sea muy difícil anular estilos específicos. Hay alguna manera de prevenir eso? Por ejemplo, tendría mucho más sentido en nuestro caso que los estilos se agreguen justo después de <script type="module" src="/build/adg-components.esm.js"></script> , por lo que cualquier siguiente <style> tendría prioridad.
Otra solución que se me ocurre es eliminar los estilos por completo cuando se ejecuta $ npm run build y luego dejar que el cliente importe los estilos manualmente. Pero esto no se siente como la forma correcta de hacerlo.
Cualquier ayuda es muy apreciada. Gracias.
1 Respuestas
Responde la pregunta0
Cuando Shadow DOM está desactivado, Stencil adjunta el CSS al elemento head , antes del primer elemento de link .
Aquí está la línea de código relevante que hace esto: https://github.com/ionic-team/stencil/blob/0cd139b6a0e17c6b0916d8b0fb3e943a523f4a2f/src/runtime/styles.ts#L79
Entonces, todo lo que necesita hacer es tener al menos un elemento de link en el head y el CSS se insertará en el orden correcto del documento para que pueda anular los estilos.