[Bug] Could not initialize ember app in shadow root node
- Dominant language
- TypeScript
- Stars
- 22.6k
- Forks
- 4.2k
- Avg merge
- 3d 12h
- Merged PRs (30d)
- 15
Description
### 🐞 Describe the Bug
If I trying to initialize ember app on shadow dom root, and it's not working.
```js
class MyApp extends HTMLElement {
constructor() {
super();
this.shadow = this.attachShadow({ mode: 'open' });
}
connectedCallback() {
createEmberApp(this.shadow);
}
}
customElements.define('my-app', MyApp);
```
### 😕 Actual Behavior
```
vendor.js:32566 Uncaught TypeError: Cannot read property 'contains' of undefined
at Class.setup (vendor.js:32566)
at Class.setupEventDispatcher (vendor.js:34140)
at Class._bootSync (vendor.js:34064)
at App.didBecomeReady (vendor.js:35128)
at invoke (vendor.js:59932)
at Queue.flush (vendor.js:59823)
at DeferredActionQueues.flush (vendor.js:60020)
at Backburner._end (vendor.js:60554)
at Backburner.end (vendor.js:60304)
at Backburner._run (vendor.js:60609)
```

Because shadowRoot does not have class list
If I'm patching it, like:
```js
class MyApp extends HTMLElement {
constructor() {
super();
this.shadow = this.attachShadow({ mode: 'open' });
this.shadow.classList = {
contains: () => { return false }
};
}
connectedCallback() {
createEmberApp(this.shadow);
}
}
customElements.define('my-app', MyApp);
```
I'm getting next error:
```
vendor.js:32571 Uncaught TypeError: Cannot read property 'classList' of null
at vendor.js:32571
at Class.setup (vendor.js:32579)
at Class.setupEventDispatcher (vendor.js:34140)
at Class._bootSync (vendor.js:34064)
at App.didBecomeReady (vendor.js:35128)
at invoke (vendor.js:59932)
at Queue.flush (vendor.js:59823)
at DeferredActionQueues.flush (vendor.js:60020)
at Backburner._end (vendor.js:60554)
at Backburner.end (vendor.js:60304)
```
from:

If I'm appending DIV into shadow root and use it as rootNode for ember APP:
```js
class MyApp extends HTMLElement {
constructor() {
super();
this.shadow = this.attachShadow({ mode: 'open' });
this.shadow.classList = {
contains: () => { return false }
};
}
connectedCallback() {
const node = document.createElement('div');
this.shadow.appendChild(node);
createEmberApp(node);
}
}
```
code works fine, but once I remove "shadow patch", it still failing:
with:

To get it working, I have to append one more div into shadow root, like:
```js
class MyApp extends HTMLElement {
constructor() {
super();
this.shadow = this.attachShadow({ mode: 'open' });
}
connectedCallback() {
const node = document.createElement('div');
const appDiv = document.createElement('div');
node.appendChild(appDiv);
this.shadow.appendChild(node);
createEmberApp(appDiv);
}
}
```
### 🤔 Expected Behavior
Ember app creation should work just fine for shadow dom ROOT node.
### 🌍 Environment
- Ember: 3.28
### ➕ Additional Context
Code: https://github.com/emberjs/ember.js/blob/a3a299cd66940bdef1531e89b94f120584119ae3/packages/%40ember/-internals/views/lib/system/event_dispatcher.js#L161
Could we check app's rootNode for `nodeType = 11` or `nodeName = "#document-fragment` to skip this chain of checks?
Contributor guide
Assessment
This issue has not been assessed yet.