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

[tomalec]

Description

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

<div id="shadowHost"></div>
<script>
  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);
</script>

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
• Firefox
• Edge
• [?] Safari 9
• [?] Safari 8
• IE 11

Versions

• webcomponents: v2.0.2

[wbern]

Has anyone recognized this issue? Ran into it today.

[calebdwilliams]

Having the same issue

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale]

This issue has been automatically closed after being marked stale. If you're still facing this problem with the above solution, please comment and we'll reopen!