Actualmente estoy trabajando en la documentación de algunos componentes de la interfaz de usuario para diferentes proyectos. Hice un proyecto separado que importa los diferentes componentes y estilos donde los muestro y los documento. El botón que intento mostrar tiene diferentes estados, uno de ellos para un proyecto en el que tengo algunos estilos aplicados a un selector de especificidad de la etiqueta HTML de la siguiente manera:

 html[mode="admin"] { .my-button { box-shadow: none; font-size: 12px; height: 35px; line-height: 40px; padding-left: 10px; padding-right: 10px; } }

Sin embargo, necesito que estos estilos se apliquen al botón en la documentación, donde no está el selector mode="admin". Sé que puedo usar un iframe y configurar la etiqueta html dentro de él para tener el selector agregado a través de JavaScript. Sin embargo, me gustaría otra solución que un iframe, si hay alguna, ya que tengo muchos estilos del proyecto de administración que se aplican a diferentes componentes que tengo que mostrar, al igual que el botón.

Avísame si hay algo que deba aclarar. Agradezco cualquier ayuda que pueda obtener. ¡Ten un excelente fin de semana!