Geek Answers Handbook

How to execute a script when updating a custom item

I have defined a user element, and I want to execute the script only when the user element is updated to its registered type. A use case is that I have to call my own method.

My main html file looks like this:

<project-list></project-list> <script> var project_list = document.getElementsByTagName("project-list")[0] project_list.custom_method("some_data"); </script>

The custom item is registered as an HTML import as follows:

 <script> "use strict"; var currentScript = document._currentScript || document.currentScript; class ProjectList extends HTMLElement { createdCallback(){ console.log("created"); } custom_method(data) { console.log("custom_method() OK"); console.log(data); this.innerHTML = data; } } document.registerElement("project-list", ProjectList); </script>

My question is simple: how to make sure that the script in the main html file is called only after the user element receives its custom_method method?

I am looking for an elegant solution. Something that special authors would think about. I do not mind changing the architecture quite a bit (for example, moving javascript from the main file to another user element, if necessary).

+9
javascript html5 custom-element web-component html-imports
source share
1 answer

Sync HTML Import

As suggested by @dandavis, because of the default sync behavior of the <link> and <script> elements, you just need to put your tags in the correct order: registration before calling the method.

Or instead, you can call your own method when the DOMContentLoaded or window.onload event is DOMContentLoaded , as shown below:

 window.onload = function() { var project_list = document.getElementsByTagName("project-list")[0] project_list.custom_method("some_data") } 
 <project-list></project-list> <script> "use strict"; var currentScript = document._currentScript || document.currentScript; class ProjectList extends HTMLElement { createdCallback(){ console.log("created"); } custom_method(data) { console.log("custom_method() OK"); console.log(data); this.innerHTML = data; } } document.registerElement("project-list", ProjectList); </script>

Asynchronous HTML Import

If for some reason you want to load your HTML import file asynchronously, you can wait for the link.onload event. At that time, << 22> was already detected inside the import, the user element was registered and created.

 <html> <head> <title></title> <meta charset="utf-8" /> <link rel="import" href="projectList.html" id="projectList" async> <script> projectList.onload = function () { console.log( "import {loaded}" ) var project_list = document.getElementsByTagName( "project-list" )[0] project_list.custom_method("some_data") } </script> </head> <body> <project-list id="pl"></project-list> <script> console.warn( "custom_method is " + pl.custom_method ) //undefined </script> </body> </html>

With WebComponents.js polyfill

In this situation, polyfill will not instantiate the created object immediately after loading the import. Instead, you should listen to the WebComponentsReady event:

 document.addEventListener( "WebComponentsReady", function () { console.log( "WebComponentsReady" ) var project_list = document.getElementsByTagName( "project-list" )[0] project_list.custom_method( "some_data" ) } )

It works with Firefox, IE 11, and also with Chrome.

+3
source share

More articles:


All Articles