---
title: "Declarative Shadow DOM"
description: "Shadow DOM for the server with ease using declarative template syntax. Practical notes and code examples on Declarative."
url: "https://h3manth.com/scribe/declarative-shadow-dom/"
canonical_url: "https://h3manth.com/scribe/declarative-shadow-dom/"
markdown_url: "https://h3manth.com/scribe/blog/declarative-shadow-dom.md"
publishDate: "2021-04-30T00:00:00.000Z"
author: "Hemanth HM"
category: "web"
tags: ["html","web-components","shadow-dom"]
word_count: 136
reading_time_minutes: 1
x_markdown_tokens: 368
content_signal: "ai-train=yes, search=yes, ai-input=yes"
---

# Declarative Shadow DOM

> Shadow DOM for the server with ease using declarative template syntax. Practical notes and code examples on Declarative.

Shadow DOM plays an important role in the world of web components as they provide an easy way to encapsulate, but they were created imperatively using JavaScript, with something like:

```javascript
class FancyElement extends HTMLElement {
  constructor() {
    super();
    this.ShadowRoot = this.attachShadow({ mode: "open" });
    this.ShadowRoot.innerHTML = "Shadow DOM imperative";
  }
}

customElements.get("imperative-fancy-element") ||
  customElements.define("imperative-fancy-element", FancyElement);
```

Well, this works fine for client-side only applications, but has lots of challenges to express and build them on the server (SSR). That's when declarative shadow comes into picture!

## Declarative Shadow DOM (DSD)

Declarative Shadow DOM helps us to have Shadow DOM on the server with ease. The sample imperative example above would look like:

```html
<fancy-element>
  <template shadowroot="open">
    <slot></slot>
  </template>
  <h2>Declarative Shadow DOM</h2>
</fancy-element>
```

P.S: `chrome://flags/#enable-experimental-web-platform-features` should be enabled as of today to use this feature.