In the previous section, we said that the proposed way to import Web Components, the so-called HTML Imports API, has been removed from the standard. So.... how can you define a complete Web Component (HTML, CSS, JavaScript) and use it in a HTML page or within the HTML of another component?
Well, if you want to rely only on the Web languages (HTML/CSS/JS), you will have to embed the HTML template part of your component, the CSS part for the styling of your component, in the JavaScript part of your component. Then, you will be able to include the JavaScript that defines your Web Component, as a regular JavaScript file, using <script src="yourComponent.js"></script> or using the new EcmaScript import statement and import the file as a ES Module.
Here is an example :
index.html (the host html page that imports and instantiates the Web Components) :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Web Component as a JavaScript module</title>
<script type="module" src="./mycomponent/index.js"></script>
</head>
<body>
<my-component name="Michel Buffa"></my-component>
<my-component name="Marie-Claire Forgue"></my-component>
</body>
</html>
Line 6: In this example, the Web Component is in a single JavaScript file (./mycomponent/index.js) that is imported as a JavaScript module (<script type="module"....>).
Lines 9 and 10: it can then be used like any Web Component, by adding it with its custom HTML tag (<my-components>). The components have one HTML attribute "name".
And here is the code of the Web Component (in ./mycomponent/index.js):
customElements.define(
"my-component",
class extends HTMLElement {
constructor() {
super();
this.root = this.attachShadow({ mode: });
this.name = this.getAttribute(); // get the "name" attribute value
}
connectedCallback() {
// called when the component is added to the DOM of its host
// css+html
this.css = `
#div_menu {
border : 1px solid black;
}
h1 {
color: red;
}
`;
this.html = `
<div id='div_menu'>
<h1>${this.name}
</div>
`;
this.root.innerHTML = "<style>${this.css}</style><div id='wrapper'>${this.html}</div>";
}
});
Line 1: we call customElements.define and pass as the first parameter the name of the Web Component (here <my-component), and as a second parameter the JavaScript class that defines the Web Component. Instead of using the className, in this example, the class itself is embedded in the call to define(....).
Line 10: we used the connectedCallback method that is called automatically when the component is created and connected to the DOM of its host. In this method we use JavaScript template literals to embed the HTML template of the component and its CSS associated style in the class properties this.html and this.css. This is a convenient way to define in a single line both the HTML and the CSS for the component (this is done in line 26).
Of course, we could have defined a more complex component. This simple example shows how we can embed the CSS and HTML template in the JavaScript code of the component.