Event when web component has loaded

Question

I have a web component like this

<template id="component">
    <link href="/static/css/main.cacbacc7.css" rel="stylesheet">
    <script src="/static/js/vendor.js" type="text/javascript"></script>
    <script src="/static/js/bundle.js" type="text/javascript"></script>
    <span id="react-app"></span>
</template>

<script>
  (function (window, document) {
    const doc = (document._currentScript || document.currentScript).ownerDocument;
    const proto = Object.create(HTMLElement.prototype, {
      attachedCallback: {
        value: function () {
          const template = doc.querySelector('template#component').content;
          const shadowRoot = this.attachShadow({ mode: 'open' });
          shadowRoot.appendChild(template.cloneNode(true));
          // executeThis() when all scripts have been loaded
        }
      },
    });
    document.registerElement('react-webcomponent', { prototype: proto });
  })(window, document);
</script>

Can I know when all script tags in my template have been loaded?

Update

What I am currently doing is

const scripts = [...shadowRoot.querySelectorAll('script')];
let scriptsLoaded = 0;
scripts.forEach(function (script) {
  script.addEventListener('load', function () {
    if (++scriptsLoaded >= scripts.length) {
      LoadReactAppIntoShadowDomContainer(shadowRoot.querySelector('#react-app'));
    }
  })
});

But I am hoping for a nicer way.

About the possible duplicate: Will it work for web components?

Sorry, but I don't want to load jQuery just for this little thing — Lukas, Aug 07 '17 at 11:10
Possible duplicate of [pure JavaScript equivalent to jQuery's $.ready() how to call a function when the page/dom is ready for it](https://stackoverflow.com/questions/9899372/pure-javascript-equivalent-to-jquerys-ready-how-to-call-a-function-when-the) — Koby Douek, Aug 07 '17 at 11:27
Is your goal, `to know when your components have completed parsing upgrading and loading`? — Schrodinger's cat, Aug 07 '17 at 11:46
My goal is to know when the scripts have loaded because I want to call a function that is defined in the scripts — Lukas, Aug 07 '17 at 11:47
Also, Just because, the script tags are inside the component, doesn't mean they are scoped. they are still globally available — Schrodinger's cat, Aug 07 '17 at 11:55
Correct me if I am wrong, but isn't `WebcomponentsReady ` a polyfill of Polymer only? — Lukas, Aug 07 '17 at 11:55
As for the scripts being global, how does that make a difference? — Lukas, Aug 07 '17 at 11:56
Using the load event (or onload event handler, or the onload element attribute) on script is the best solution. — Supersharp, Aug 07 '17 at 12:28

score 2 · Answer 1 · answered Jun 10 '18 at 00:38

Your update example is the best way I know of.

I had a similar issue looking to prevent FOUC on my components that were importing CSS via tags.

The only solution I could find is as per your update. QS the ShadowRoot to find the <link> or <scripts>, add a load event listener to each and compare the load count.

The one optimisation you might consider, is when the count matches you can dispatch your own custom load event from the shadow root itself, that a listener on your component shadow root (or further up the tree) can handle.

var event = new CustomEvent('load');
shadowRoot.dispatchEvent(event);

If you want it to bubble up and cross the shadow boundary you'll need to add composed : true to the event args.

var event = new CustomEvent('load', {bubbles : true, composed : true});
shadowRoot.dispatchEvent(event);

Schrodinger's cat · Accepted Answer · 2017-08-07T14:29:01.167

From what I understand, as of now,

you do not have event listeners for onload of the dom in your shadow root
when you define a custom element, you can have a connectedCallback which is called when you attach an element to your DOM

from what you are trying, it seems to me, that you are trying to ascertain, the exact time when your shadow DOM loads its internal scripts

from what I know, scripts are not scoped to your element, and are global.

So Instead of trying to do what you are doing at the moment which is,

querying the shadow Root's DOM structure, collecting the script tags and attaching an onload,

you can simply slap an onload to the tags which work like they always have.

Further, you might be interested in mutation observers if you may want to observe for changes to your shadow DOM, once it is attached and beyond.

AFAIK, you can not observe DOM changes while you are constructing your element itself / before it is attached

Or, if you are defining your elements in a different file and prefer using HTML Imports to import them onto the document,

you can use the webcomponentsready listener from the document that imports, which fires when all the DOM is imported, parsed, and loaded

If there is indeed a way to observe the DOM or listen to template attachments to your element, I would also like to know.

Also, Since you are trying to embed your react app into the custom element, which is probably why you had this question of knowing when to call the loadreactapp function, you may want to consider using slots in your shadow DOM, which open up places where you may distribute content after your element has been registered on the browser

Just add your apps or other custom elements, by passing in the attribute slot=<slotname>

I've absolutely no idea why this is the accepted answer, as it doesn't actually answer the the OPs question. — Neil, Jun 10 '18 at 00:27

Event when web component has loaded

2 Answers2