fix: get things working

knownasilya · Oct 4, 2020 · 3e49dc5 · 3e49dc5
1 parent a6a0688
commit 3e49dc5
Show file tree

Hide file tree

Showing 8 changed files with 3,528 additions and 2,229 deletions.
diff --git a/addon/components/shadow-dom/component.js b/addon/components/shadow-dom/component.js
@@ -1,21 +1,15 @@
-import Component, { tracked } from '@glimmer/component';
-//import { tracked } from '@glimmer/tracking';
-import layout from './template';
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
 
 export default class ShadowDom extends Component {
   @tracked shadow = null;
 
-  layout = layout;
   mode = 'open';
 
-  constructor() {
-    super(...arguments);
-    this.setupRoot();
-  }
-
-  setupRoot() {
+  @action
+  setupRoot(element) {
     let mode = this.mode;
-    let element = document.createElement('div');
     let shadow = element.attachShadow({ mode });
 
 		this.shadow = shadow;

diff --git a/addon/components/shadow-dom/template.hbs b/addon/components/shadow-dom/template.hbs
diff --git a/app/templates/components/shadow-dom.hbs b/app/templates/components/shadow-dom.hbs
@@ -0,0 +1,6 @@
+<div {{did-insert this.setupRoot}} ...attributes></div>
+{{#if this.shadow}}
+  {{#-in-element this.shadow}}
+    {{yield}}
+  {{/-in-element}}
+{{/if}}
diff --git a/package.json b/package.json
@@ -25,14 +25,15 @@
     "release": "standard-version"
   },
   "dependencies": {
-    "ember-cli-babel": "^7.6.0",
-    "ember-cli-htmlbars": "^3.0.0",
+    "@ember-decorators/babel-transforms": "^2.1.2",
     "@glimmer/component": "^0.14.0-alpha.3",
-    "@ember-decorators/babel-transforms": "^2.1.2"
+    "ember-cli-babel": "^7.6.0",
+    "ember-cli-htmlbars": "^3.0.0"
   },
   "devDependencies": {
-    "babel-eslint": "^8.0.2",
     "@ember/optional-features": "^0.7.0",
+    "@ember/render-modifiers": "^1.0.0",
+    "babel-eslint": "^8.0.2",
     "broccoli-asset-rev": "^3.0.0",
     "ember-auto-import": "^1.2.20",
     "ember-cli": "github:ember-cli/ember-cli#29be08db0725bf1d07877702bc4b27a9428c4875",
@@ -58,6 +59,9 @@
     "qunit-dom": "^0.8.0",
     "standard-version": "^8.0.1"
   },
+  "resolutions": {
+    "@babel/preset-env": "7.3.4"
+  },
   "engines": {
     "node": "6.* || 8.* || >= 10.*"
   },

diff --git a/tests/dummy/app/components/test-shadow/template.hbs b/tests/dummy/app/components/test-shadow/template.hbs
@@ -1,7 +1,6 @@
 Outside the shadow
-<div id='shadowed'></div>
 
-<ShadowDom @selector='#shadowed'>
+<ShadowDom class='hello'>
   <style>
     .internal {
       color: red;

diff --git a/tests/dummy/config/environment.js b/tests/dummy/config/environment.js
@@ -10,6 +10,9 @@ module.exports = function(environment) {
       FEATURES: {
         // Here you can enable experimental features on an ember canary build
         // e.g. 'with-controller': true
+        EMBER_NATIVE_DECORATOR_SUPPORT: true,
+        EMBER_METAL_TRACKED_PROPERTIES: true,
+        EMBER_GLIMMER_ANGLE_BRACKET_NESTED_LOOKUP: true,
       },
       EXTEND_PROTOTYPES: {
         // Prevent Ember Data from overriding Date.parse.

diff --git a/tests/integration/components/shadow-dom/component-test.js b/tests/integration/components/shadow-dom/component-test.js
@@ -8,12 +8,11 @@ module('Integration | Component | shadow-dom', function(hooks) {
 
   test('it renders', async function(assert) {
     await render(hbs`
-      <div id='internal'></div>
-      <ShadowDom @selector='#internal'>
-        template block text
+      <ShadowDom id='internal'>
+        <div class='block'>template block text</div>
       </ShadowDom>
     `);
 
-    assert.equal(find('#internal').shadowRoot.textContent.trim(), 'template block text');
+    assert.dom('.block', find('#internal').shadowRoot).hasText('template block text');
   });
 });