webcomponents / webcomponents/polyfills

[ShadyDOM] Mutation Observer callback is not called for shadow hosts

Open
#81 4 comments 2 reactions 0 assignees View on GitHub
Focus Area: Standards & Polyfills Package: shadydom Severity: High Type: Bug wontfix
Dominant language
HTML
Stars
1.2k
Forks
168
PR merge metrics
No merged PRs in 30d

Description

### Description
Mutation Observer callback is not called when elements are added or removed from shadow host.

```html

shadowHost.attachShadow({mode:'open'}).innerHTML = `<div><slot></slot></div>`;
var hostObserverCalled = false;
(new MutationObserver((mutationsList)=>{
console.info('mutated');
hostObserverCalled = true;
})).observe(shadowHost, { childList: true });

shadowHost.appendChild(document.createElement('div'));

setTimeout(()=>{
console.assert(hostObserverCalled, 'Shadow hot\s mutation observer callback should be eventually called.');
}, 500);

```
#### Live Demo
https://glitch.com/edit/#!/mutationobserver-on-shadowhost?path=index.html:15:41

#### Steps to Reproduce

1. Attach shadow root to an element.
2. Attach mutation observer `{childList: true}` and observe the element.
3. Create `div`.
4. Append `div` to the element or remove existing element.

#### Expected Results
Mutation observer callback should get called

#### Actual Results
The callback is not called

### Browsers Affected

- [ ] Chrome
- [x] Firefox
- [x] Edge
- [?] Safari 9
- [?] Safari 8
- [x] IE 11

### Versions
- webcomponents: v2.0.2

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.