A Simple Web Component's folder structure may look like this:
The HTML file for the layout and the JS file to register the functionality.
customElements.define('simple-custom', ...
The reserved word customElements is a part of the CustomElementRegistry which is an interface in the DOM.
The define function can take multiple parameters:
define(name, constructor)
define(name, constructor, options)
This use of the define function gives the custom-element a name, and it defines the implementation of the class.
customElements.define('simple-custom',
class extends HTMLElement {
constructor() {
super();
...
It is a class definition which extends an HTMLElement followed by a constructor which must call super() first.
Creating the HTML Content
customElements.define('simple-custom',
class extends HTMLElement {
constructor() {
super();
const divElem = this.createHTMLContent();
createHTMLContent() {
const divElem = document.createElement('div');
divElem.textContent = this.getAttribute('text');
return divElem;
}
Attaching a Shadow
customElements.define('simple-custom',
class extends HTMLElement {
constructor() {
super();
const divElem = this.createHTMLContent();
this.createShadow(divElem);
}
createShadow(divElem) {
const shadowRoot = this.attachShadow({ mode: 'open' });
shadowRoot.appendChild(divElem);
}
And the HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>:defined demo</title>
<script src="main.js" defer></script>
<style>
p {
background: yellow;
}
simple-custom {
background: cyan;
}
:defined {
font-style: italic;
}
simple-custom:not(:defined) {
display: none;
}
simple-custom:defined {
display: block;
}
</style>
</head>
<body>
<h1><code>:defined</code> demo</h1>
<simple-custom text="Custom element example text"></simple-custom>
<p>Standard paragraph example text</p>
</body>
</html>
Top comments (0)