Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ability to observe a particular element's connectedness. #4

Open
trusktr opened this issue Dec 29, 2023 · 3 comments
Open

ability to observe a particular element's connectedness. #4

trusktr opened this issue Dec 29, 2023 · 3 comments

Comments

@trusktr
Copy link

trusktr commented Dec 29, 2023

For example,

const observer = new ConnectionObserver((connected) => {
  if (connected) console.log('connected')
  else console.log('disconnected')
})

observer.observe(el)

Or, we already have EventTarget in the web, why did we need a new API shape (MutationObserver) again????

el.addEventListener('connected', () => console.log('connected'))
el.addEventListener('disconnected', () => console.log('didconnected'))
@ox-harris
Copy link
Member

It's an interesting thing to do. Will share what I find possible with realdom

ox-harris added a commit that referenced this issue Dec 30, 2023
…utations across shadow roots; see issue #3. Experimental API: realtime().track() for tracking connectedness; much like connected/disconnectedCallback; see issue #4.
@ox-harris
Copy link
Member

@trusktr you can now observe cross-roots mutations. Just set options.subtree to cross-roots.

Also, we've now introduced a help method for observing an element's connectedness: the .track() method. (But maybe there's a better name, dunno.)

const p = document.createElement('p');
realtime(document).track(p, state/*Bool*/ => {
    console.log('connectedness:', state);
});
document.appendChild(p); // connectedness: true
p.remove(); // connectedness: false

@ox-harris
Copy link
Member

Next would be exploring an event model. I really do like that one.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants