Styling Light DOM

Looking at our diagram:

html

<custom-alert>
  <p>This is Light DOM</p>
  ---------Shadow Boundary----------
  | <img src="path/to/icon.svg"/>  |
  | <slot></slot>                  |
  | <button>Close</button>         |
  ----------------------------------
</custom-alert>

<custom-alert>
  <p>This is Light DOM</p>
  ---------Shadow Boundary----------
  | <img src="path/to/icon.svg"/>  |
  | <slot></slot>                  |
  | <button>Close</button>         |
  ----------------------------------
</custom-alert>

From your global stylesheet you are able to style anything that exists in the Light DOM, this includes any content that gets slotted into the Shadow DOM. In our example, you can style the <custom-alert> wrapper, the <p> tag, but not the <img> or the <button>

Styling Light DOM ​

Example ​

Styling Light DOM

Example