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.

Using with shadow-dom doesn't trigger onload function

See original GitHub issue
import bel from 'bel';

export default class MyApp extends HTMLElement {
  createdCallback() {
    let greeting = this.getAttribute('greeting');
    let html = bel`
        <div id="quotes">
          <div class="header" onload=${() => console.log('test')}>
            ${greeting ? greeting : 'Hello!'}
            <content select="my-name"></content>
          <div class="body">
            <content select="my-profile"></content>


Which I use:

<my-app greeting='Hi'>
    This is my profile

The DOM renders fine, but on load there is nothing in the console.

Issue Analytics

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

github_iconTop GitHub Comments

shamacommented, Jul 2, 2016

Hmm that is a tough one since on-load only watches the document.body and AFAIK can’t observe mutations into shadow doms. We would need to observe the shadow root and there isn’t an interface provided for that.

It would probably be expensive to detect whether an element is within a shadow dom, as we’d need to traverse the parentNode on render.

We might be able to have on-load watch for shadow doms added, then observe each of those as well. I have no idea if that would work or how expensive it would be though.

goto-bus-stopcommented, Oct 24, 2019

this is no longer an issue with nanohtml because it doesn’t include on-load anymore.

Read more comments on GitHub >

github_iconTop Results From Across the Web

I want to wait until the Shadow DOM elements are loaded
I believe this is due to the fact that the shadow dom element is not loaded on the page at the time the...
Read more >
Shadow DOM and events - The Modern JavaScript Tutorial
Events that happen in shadow DOM have the host element as the target, when caught outside of the component. Here's a simple example:....
Read more >
Using shadow DOM - Web Components | MDN
Shadow DOM allows hidden DOM trees to be attached to elements in the regular DOM tree — this shadow DOM tree starts with...
Read more >
5. Working with the Shadow DOM - Modern JavaScript [Book]
The shadow root is the root node for the shadow DOM branch. Shadow root child nodes are not returned by DOM queries even...
Read more >
Shadow DOM v1 - Self-Contained Web Components
You don't have to author web components that use shadow DOM. But when you do, ... a shadow DOM ( <img> ). For...
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 Post

No results found

github_iconTop Related Hashnode Post

No results found