emberjs / emberjs/ember.js

[Bug] Could not initialize ember app in shadow root node

Open
#19,734 0 comments 0 reactions 0 assignees View on GitHub
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)
```

![image](https://user-images.githubusercontent.com/1360552/131173276-999c5071-4929-4f84-a917-3cdad375ff6d.png)

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:

![image](https://user-images.githubusercontent.com/1360552/131173532-d7982bcb-ccca-468e-a504-6994cdc8a050.png)

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:

![image](https://user-images.githubusercontent.com/1360552/131173780-592176f2-e878-4436-95d0-82796f458f95.png)

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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.