# Shadow DOM

Source: https://signy.dev/documentation/1/components/shadow-dom/

Scoped styles for one component.

Set `shadow = true` and the component renders into its own shadow root. `styles` apply inside it only, and page styles do not leak in.

```js
const { Component, application, html } = Signy;

class Pill extends Component {
  shadow = true;
  styles = `
    span {
      padding: 0.25rem 0.75rem;
      border-radius: 999px;
      color: #fff;
      background: linear-gradient(90deg, #c040f0, #7a1fc0);
    }
  `;

  render() {
    return html`<span>Scoped styles</span>`;
  }
}

application(Pill).mount("#shadow-badge");
```

In TypeScript, declare both as `protected`. `styles` also takes an array of strings or of `CSSStyleSheet` objects, and `shadow` takes options such as `{ mode: 'closed' }`.