fix: allow changing the element tag

knownasilya · Mar 20, 2019 · 429b881 · 429b881
1 parent 4527595
commit 429b881
Show file tree

Hide file tree

Showing 7 changed files with 35 additions and 6 deletions.
diff --git a/README.md b/README.md
@@ -59,9 +59,12 @@ API
 
 ### `ShadowDom` (`shadow-dom`)
 
-#### Attributes
+#### Arguments
 
 - `@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.
 
 Testing
 -------

diff --git a/addon/components/shadow-dom/component.js b/addon/components/shadow-dom/component.js
@@ -4,9 +4,15 @@ import { action } from '@ember/object';
 
 export default class ShadowDom extends Component {
   @tracked shadow = null;
+  @tracked tagName = 'div';
 
   defaultMode = 'open';
 
+  constructor() {
+    super(...arguments);
+    this.tagName = this.args.tagName || this.tagName;
+  }
+
   @action
   setupRoot(element) {
     let mode = this.args.mode || this.defaultMode;

diff --git a/app/templates/components/shadow-dom.hbs b/app/templates/components/shadow-dom.hbs
@@ -1,7 +1,9 @@
-<div
-  {{did-insert this.setupRoot}}
-  ...attributes
-></div>
+{{#let (element this.tagName) as |Tag|}}
+  <Tag
+    {{did-insert this.setupRoot}}
+    ...attributes
+  ></Tag>
+{{/let}}
 
 {{#if this.shadow}}
   {{#-in-element this.shadow}}

diff --git a/package.json b/package.json
@@ -25,6 +25,7 @@
     "release": "standard-version"
   },
   "dependencies": {
+    "ember-element-helper": "^0.1.1",
     "@ember-decorators/babel-transforms": "^2.1.2",
     "@glimmer/component": "^0.14.0-alpha.3",
     "ember-cli-babel": "^7.6.0",

diff --git a/tests/dummy/config/optional-features.json b/tests/dummy/config/optional-features.json
@@ -1,3 +1,3 @@
 {
-  "application-template-wrapper": false
+  "jquery-integration": false
 }
diff --git a/tests/integration/components/shadow-dom/component-test.js b/tests/integration/components/shadow-dom/component-test.js
@@ -25,4 +25,14 @@ module('Integration | Component | shadow-dom', function(hooks) {
 
     assert.dom('.block', find('#internal').shadowRoot).doesNotExist();
   });
+
+  test('it can have a different tag name', async function(assert) {
+    await render(hbs`
+      <ShadowDom @tagName='span'>
+        <div class='block'>template block text</div>
+      </ShadowDom>
+    `);
+
+    assert.dom('.block', find('span').shadowRoot).hasText('template block text');
+  });
 });
diff --git a/yarn.lock b/yarn.lock
@@ -4441,6 +4441,13 @@ ember-compatibility-helpers@^1.1.1, ember-compatibility-helpers@^1.1.2, ember-co
     semver "^5.6.0"
     silent-error "^1.1.1"
 
+ember-element-helper@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/ember-element-helper/-/ember-element-helper-0.1.1.tgz#ffd2a0566b22a13c0e7780ae96443f4ffda2e63d"
+  integrity sha512-MfES7MbZ5UcHTo1lutJCcz6hI+/CadurWcOR3kOQl0jKcBKdAWyYIJXK4u0FDXzlgKczX9vL3R2eJUtnGe144w==
+  dependencies:
+    ember-cli-babel "^6.16.0"
+
 ember-export-application-global@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/ember-export-application-global/-/ember-export-application-global-2.0.0.tgz#8d6d7619ac8a1a3f8c43003549eb21ebed685bd2"