fix: rename component to shadow-root

BREAKING CHANGE: Component `ShadowDom` has been renamed to `ShadowRoot`.

README.md

@@ -31,25 +31,25 @@ ember install ember-shadow-dom
 
 ## Usage
 
-This addon provides a component called `ShadowDom` (or `shadow-dom` if not using angle brackets)
+This addon provides a component called `ShadowRoot` (or `shadow-root` if not using angle brackets)
 
 ```hbs
-<ShadowDom>
+<ShadowRoot>
   <style>
     .internal {
       color: red;
     }
   </style>
 
   <span class='internal'>Internal</span>
-</ShadowDom>
+</ShadowRoot>
 ```
 
 This mode makes the encapsulating component's children a shadow root.
 
 ## API
 
-### `ShadowDom` (`shadow-dom`)
+### `ShadowRoot` (`shadow-root`)
 
 #### Arguments
 
@@ -70,9 +70,9 @@ assert.dom('.block', root).hasText('template block text');
 Where the template looks like:
 
 ```hbs
-<ShadowDom id='internal'>
+<ShadowRoot id='internal'>
   <div class='block'>template block text</div>
-</ShadowDom>
+</ShadowRoot>
 ```
 
 ## Contributing

addon/components/shadow-dom/component.js → addon/components/shadow-root/component.js

@@ -4,7 +4,7 @@ import { action } from '@ember/object';
 
 const isFastBoot = typeof FastBoot !== 'undefined';
 
-export default class ShadowDom extends Component {
+export default class ShadowRoot extends Component {
   @tracked shadow = null;
   @tracked tagName = 'div';
 

app/components/shadow-dom.js

@@ -1 +1 @@
-export { default } from 'ember-shadow-dom/components/shadow-dom/component';
+export { default } from 'ember-shadow-dom/components/shadow-root/component';

tests/dummy/app/components/test-shadow/template.hbs

@@ -1,6 +1,6 @@
 Outside the shadow
 
-<ShadowDom class='hello'>
+<ShadowRoot class='hello'>
   <style>
     .internal {
       color: red;
@@ -12,11 +12,11 @@ Outside the shadow
     <button {{action this.clicked}}>Clicked</button>
     {{if this.wasClicked 'Clicked' 'Not Clicked'}}
   </div>
-</ShadowDom>
+</ShadowRoot>
 
 <hr>
 closed<br>
 
-<ShadowDom id='internal' @mode='closed'>
+<ShadowRoot id='internal' @mode='closed'>
   <div class='block'>template block text</div>
-</ShadowDom>
+</ShadowRoot>

tests/integration/components/shadow-root/component-test.js

@@ -0,0 +1,42 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { find, render } from '@ember/test-helpers';
+import hbs from 'htmlbars-inline-precompile';
+
+module('Integration | Component | shadow-root', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function (assert) {
+    await render(hbs`
+      <ShadowRoot>
+        <div class='block'>template block text</div>
+      </ShadowRoot>
+    `);
+
+    assert
+      .dom('.block', find('.ember-view > div').shadowRoot)
+      .hasText('template block text');
+  });
+
+  test('it can be closed', async function (assert) {
+    await render(hbs`
+      <ShadowRoot id='internal' @mode='closed'>
+        <div class='block'>template block text</div>
+      </ShadowRoot>
+    `);
+
+    assert.dom('.block', find('#internal').shadowRoot).doesNotExist();
+  });
+
+  test('it can have a different tag name', async function (assert) {
+    await render(hbs`
+      <ShadowRoot @tagName='span'>
+        <div class='block'>template block text</div>
+      </ShadowRoot>
+    `);
+
+    assert
+      .dom('.block', find('span').shadowRoot)
+      .hasText('template block text');
+  });
+});