Skip to content


Repository files navigation


Write templates for your components inside of a Shadow DOM root. Allows encapsulating styles (CSS) and markup (HTML) but using templates like you're used to.

🛠 Support for SSR/FastBoot in Chrome 90+, Release notes.

🤔 Not sure what Shadow DOM is? Check out this MDN article.

Compatibility: Most browsers support Shadow DOM (v1), except for IE11, see CanIUse for details

npm version


  • Ember.js v3.16 or above
  • Ember CLI v2.13 or above
  • Node.js v12 or above

If using Ember < 3.20, this addon will use the private version of {{in-element}} via a polyfill.


ember install ember-shadow-dom


This addon provides a component called ShadowRoot.

    .internal { color: red; }

  <span class='internal'>Internal</span>

This makes the encapsulating component's children a shadow root.


In Shadow DOM you can generally use <slots>, but with Ember you can just use {{yield}}.

{{! components/test.hbs }}
    .internal { color: red; }

  <span class='internal'>

And you can call the component:

  Hello World!

And the contents Hello World! will be inside the shadow root. If you need multiple "slots", you can use ember-named-blocks-polyfill.

{{! components/card.hbs }}
<ShadowRoot ...attributes>
    .title { color: red; } .body { margin-top: 1rem; }

  <header class='title'>
    {{yield to='title'}}

  <div class='body'>
    {{yield to='body'}}

And use the component like so:

<Card class='custom-card'>
    My title

    Some content here!


<ShadowRoot> Component


  • @mode (string) - The mode of the Shadow Root, defaults to 'open'. Can be 'open' or 'closed'. Note that 'closed' mode prevents you from querying into the DOM of your components in tests.
  • @tagName (string) - This defaults to 'div', but can be any valid element tag name used in HTML. Setting this argument changes the top level element that the shadow root is attached to.


This addon supports ShadowDom in SSR (meaning your styles will remain the same on initial render and not change when rehydrated) in Chrome 90+

Other browser vendors should follow, but there is some risk that it never happens. Details here:


Components with a open shadowroot can be tested using qunit-dom like so:

let root = find('#internal').shadowRoot;
assert.dom('.block', root).hasText('template block text');

Where the template looks like:

<ShadowRoot id='internal'>
  <div class='block'>template block text</div>

Note: check out for piercing the shadow for querying elements


See the Contributing guide for details.


Thanks to @rwjblue for realizing that {{in-element}} can be used for the shadow root!


This project is licensed under the MIT License.