I am currently working on documentation for some UI components for different projects. I've made a separate project that imports the different components and styles where I showcase and document them. The button I am trying to showcase has different states, one of them for a project where I have some styles applied to a specificity selector of the HTML tag like so:

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

However I need these styles applied to the button in the documentation, where there isn't the mode="admin" selector. I know I can use an iframe and set the html tag within it to have the added selector through JavaScript. I would however like another solution than an iframe, if there is any, as I have a lot of styles from the admin project that applies to different components I have to showcase, just like the button.

Let me know if there is something I need to clarify. I appreciate any help I can get. Have a great weekend!