How to execute a script when the custom element is upgraded
Sync HTML Import
As suggested by @dandavis, because of the sync
default behaviour of the <link>
and <script>
elements, you just have to put your tags in the right order: registration before method call.
Or instead you can call your custom method when the DOMContentLoaded
or the window.onload
event is fired, as 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>
Async HTML Import
If for some reasons you want to load your HTML Import file asynchronousely, you can wait for the link.onload
event. At this time the |<script>
inside the import has been already exectued, the custom element 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 the polyfill won't instantiate the created object immediately after the import is loaded. 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.