fix: add back custom tagname

knownasilya · Oct 4, 2020 · 3eb6d62 · 3eb6d62
1 parent 385b451
commit 3eb6d62
Show file tree

Hide file tree

Showing 6 changed files with 31 additions and 34 deletions.
diff --git a/README.md b/README.md
@@ -22,7 +22,7 @@ Not sure what Shadow DOM is? Check out this [MDN article](https://developer.mozi
 Compatibility
 ------------------------------------------------------------------------------
 
-* Ember.js v2.18 or above
+* Ember.js v3.7.2 or above ([See why][see-why])
 * Ember CLI v2.13 or above
 
 
@@ -63,16 +63,17 @@ API
 
 - `@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. -->
+- `@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
 -------
 
 Components with a open shadowroot can be tested using qunit-dom like so:
 
 ```js
-assert.dom('.block', find('#internal').shadowRoot).hasText('template block text');
+let root = find('#internal').shadowRoot;
+assert.dom('.block', root).hasText('template block text');
 ```
 
 Where the template looks like:
@@ -102,3 +103,4 @@ This project is licensed under the [MIT License](LICENSE.md).
 
 [npm-badge]: https://badge.fury.io/js/ember-shadow-dom.svg
 [npm-badge-url]: http://badge.fury.io/js/ember-shadow-dom
+[see-why]: https://github.com/tildeio/ember-element-helper/issues/6#issuecomment-519349886]]
diff --git a/app/templates/components/shadow-dom.hbs b/app/templates/components/shadow-dom.hbs
@@ -1,14 +1,13 @@
-{{!-- {{#let (element this.tagName) as |Tag|}}
+{{#let (element this.tagName) as |Tag|}}
   <Tag
     {{did-insert this.setupRoot}}
     ...attributes
-  />
-{{/let}} --}}
-<div {{did-insert this.setupRoot}} ...attributes>
-  {{#unless this.shadow}}
-    {{yield}}
-  {{/unless}}
-</div>
+  >
+    {{#unless this.shadow}}
+      {{yield}}
+    {{/unless}}
+  </Tag>
+{{/let}}
 
 {{#if this.shadow}}
   {{#-in-element this.shadow}}

diff --git a/config/ember-try.js b/config/ember-try.js
@@ -11,22 +11,10 @@ module.exports = function() {
     return {
       scenarios: [
         {
-          name: 'ember-lts-2.18',
-          env: {
-            EMBER_OPTIONAL_FEATURES: JSON.stringify({ 'jquery-integration': true })
-          },
-          npm: {
-            devDependencies: {
-              '@ember/jquery': '^0.5.1',
-              'ember-source': '~2.18.0'
-            }
-          }
-        },
-        {
-          name: 'ember-lts-3.4',
+          name: 'ember-lts-3.7.2',
           npm: {
             devDependencies: {
-              'ember-source': '~3.4.0'
+              'ember-source': '~3.7.2'
             }
           }
         },

diff --git a/package.json b/package.json
@@ -25,6 +25,7 @@
     "release": "standard-version"
   },
   "dependencies": {
+    "ember-element-helper": "^0.1.1",
     "@ember/render-modifiers": "^1.0.0",
     "@glimmer/component": "^0.14.0-alpha.7",
     "ember-cli-babel": "^7.7.0",

diff --git a/tests/integration/components/shadow-dom/component-test.js b/tests/integration/components/shadow-dom/component-test.js
@@ -26,13 +26,13 @@ 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>
-  //   `);
+  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');
-  // });
+    assert.dom('.block', find('span').shadowRoot).hasText('template block text');
+  });
 });
diff --git a/yarn.lock b/yarn.lock
@@ -4544,6 +4544,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"