feat: basic implementation

Adds `ShadowDom` component

CONTRIBUTING.md

@@ -0,0 +1,27 @@
+Contributing
+============
+
+## Installation
+
+* `git clone <repository-url>`
+* `cd ember-shadow-dom`
+* `npm install`
+
+## Linting
+
+* `npm run lint:hbs`
+* `npm run lint:js`
+* `npm run lint:js -- --fix`
+
+## Running tests
+
+* `ember test` – Runs the test suite on the current Ember version
+* `ember test --server` – Runs the test suite in "watch mode"
+* `ember try:each` – Runs the test suite against multiple Ember versions
+
+## Running the dummy application
+
+* `ember serve`
+* Visit the dummy application at [http://localhost:4200](http://localhost:4200).
+
+For more information on using ember-cli, visit [https://ember-cli.com/](https://ember-cli.com/).

README.md

@@ -1,51 +1,74 @@
 ember-shadow-dom
-==============================================================================
+================
 
-[Short description of the addon.]
+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.
 
 Installation
-------------------------------------------------------------------------------
+------------
 
-```
+```sh
 ember install ember-shadow-dom
 ```
 
-
 Usage
-------------------------------------------------------------------------------
+-----
 
-[Longer description of how to use the addon in apps.]
+This addon provdes a component called `ShadowDom` (or `shadow-dom` if not using angle brackets)
 
+```hbs
+<ShadowDom @el={{this.element}}>
+  <style>
+    .internal {
+      color: red;
+    }
+  </style>
 
-Contributing
-------------------------------------------------------------------------------
+  <span class='internal'>Internal</span>
+</ShadowDom>
+```
 
-### Installation
+This mode makes the encapsulating component's children a shadow root, meaning
+it does not support having any elements outside of the `ShadowDom` component block.
 
-* `git clone <repository-url>`
-* `cd ember-shadow-dom`
-* `npm install`
+To mix shadow and normal templates, you need to use the `@selector` attribute.
 
-### Linting
+```hbs
+<div id='internal'></div>
+Outside of the shadow dom
 
-* `npm run lint:hbs`
-* `npm run lint:js`
-* `npm run lint:js -- --fix`
+<ShadowDom @selector='#internal'>
+  <style>
+    .internal {
+      color: red;
+    }
+  </style>
 
-### Running tests
+  <span class='internal'>Internal</span>
+</ShadowDom>
+```
 
-* `ember test` – Runs the test suite on the current Ember version
-* `ember test --server` – Runs the test suite in "watch mode"
-* `ember try:each` – Runs the test suite against multiple Ember versions
+API
+---
 
-### Running the dummy application
+### `ShadowDom` (`shadow-dom`)
+
+#### Attributes
+
+- `@selector` (string) - selector used by `document.querySelector` to get the element to
+which the shadow root is attached.
+- `@el` (HTMLElement) - the actual element that you want to attach the shadow root to. This attribute
+will always take precedence over `@selector`.
+- `@mode` (string) - The mode of the Shadow Root, defaults to `'open'`.
+
+Contributing
+------------
 
-* `ember serve`
-* Visit the dummy application at [http://localhost:4200](http://localhost:4200).
+See the [Contributing.md](./CONTRIBUTING.md) guide.
 
-For more information on using ember-cli, visit [https://ember-cli.com/](https://ember-cli.com/).
 
 License
-------------------------------------------------------------------------------
+-------
 
 This project is licensed under the [MIT License](LICENSE.md).

addon/components/shadow-dom/component.js

@@ -0,0 +1,23 @@
+import Component from '@ember/component';
+import layout from './template';
+
+export default Component.extend({
+  layout,
+  tagName: '',
+  mode: 'open',
+
+  didInsertElement() {
+    let element = this.el;
+
+    if (!element) {
+      let selector = this.selector;
+
+      element = document.querySelector(selector);
+    }
+
+    let mode = this.mode;
+    let shadow = element.attachShadow({ mode });
+
+		this.set('shadow', shadow);
+  }
+});

addon/components/shadow-dom/template.hbs

@@ -0,0 +1,3 @@
+{{#-in-element this.shadow}}
+  {{yield}}
+{{/-in-element}}

app/components/shadow-dom.js

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

package.json

@@ -21,6 +21,7 @@
     "test:all": "ember try:each"
   },
   "dependencies": {
+    "ember-cli-htmlbars": "^3.0.0",
     "ember-cli-babel": "^6.16.0"
   },
   "devDependencies": {
@@ -30,7 +31,6 @@
     "ember-cli": "~3.5.0",
     "ember-cli-dependency-checker": "^3.0.0",
     "ember-cli-eslint": "^4.2.3",
-    "ember-cli-htmlbars": "^3.0.0",
     "ember-cli-htmlbars-inline-precompile": "^1.0.3",
     "ember-cli-inject-live-reload": "^1.8.2",
     "ember-cli-sri": "^2.1.1",

tests/dummy/app/components/test-shadow/component.js

@@ -0,0 +1,7 @@
+import Component from '@ember/component';
+import layout from './template';
+
+export default Component.extend({
+  layout,
+  tagName: ''
+});

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

@@ -0,0 +1,14 @@
+Outside the shadow
+<div id='shadowed'></div>
+
+<ShadowDom @selector='#shadowed'>
+  <style>
+    .internal {
+      color: red;
+    }
+  </style>
+
+  <div class='internal'>
+    in the shadow
+  </div>
+</ShadowDom>

tests/dummy/app/templates/application.hbs

@@ -1,3 +1,4 @@
-<h2 id="title">Welcome to Ember</h2>
+<h2 id='title'>Welcome to Ember</h2>
 
-{{outlet}}
+{{outlet}}
+<TestShadow/>

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

@@ -0,0 +1,26 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render } from '@ember/test-helpers';
+import hbs from 'htmlbars-inline-precompile';
+
+module('Integration | Component | shadow-dom', function(hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function(assert) {
+    // Set any properties with this.set('myProperty', 'value');
+    // Handle any actions with this.set('myAction', function(val) { ... });
+
+    await render(hbs`{{shadow-dom}}`);
+
+    assert.equal(this.element.textContent.trim(), '');
+
+    // Template block usage:
+    await render(hbs`
+      {{#shadow-dom}}
+        template block text
+      {{/shadow-dom}}
+    `);
+
+    assert.equal(this.element.textContent.trim(), 'template block text');
+  });
+});