question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Custom Element MutationObserver

See original GitHub issue

I am not sure if this is related to uhtml or I am doing someting wrong. I am trying to attach a MutationObserver to a Custom Element with shadow DOM and watch for changes in the template (outside shadow DOM, not sure what the name is for this).

html`
  <custom-element>${someValue}</custom-element>
`

I am looking to catch re-render event and apply content changes to my shadow DOM.

I am attaching [non-]working pen to illustrate my issue: https://codepen.io/lemmonjuice/pen/rNMxxOw

When re-rendering the template nothing happens. However if I access the element directly and either change the textContent value or append a child the observer gets triggered. I was expecting that the re-render will trigger the observer as well. Checking the browser inspector I am seeing that the contetn was in fact updated properly.

Thanks.

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:7 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
WebReflectioncommented, Dec 3, 2020

You need childList too

0reactions
lemmoncommented, Dec 3, 2020

Okay, I guess I have figured it out. I need to pass combination of options:

{
  characterData: true,
  subtree: true,
}

Thank you!

Read more comments on GitHub >

github_iconTop Results From Across the Web

WebReflection/element-observer: A MutationObserver ...
A MutationObserver inspired observer for Custom Elements like mutations on any DOM element. - GitHub - WebReflection/element-observer: A MutationObserver ...
Read more >
MutationObserver - Web APIs | MDN
The MutationObserver interface provides the ability to watch for changes ... Mutation Observer & customize resize event listener & demo.
Read more >
MutationObserver for new created element? - Stack Overflow
When I create a new element, mutatonObserver does not work. I need to register if the giant box has changed style ... <button...
Read more >
MutationObserver + Custom Element Example - JSFiddle
Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.
Read more >
Guide to custom React Hooks with MutationObserver
Mutate and manage a piece of state for a specific component or an entire application; Trigger side effects on a page, like changing...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found