npm init -y
npm install @webcomponents/webcomponentsjs
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Custom UI Component</title>
</head>
<body>
<template id="custom-component-template">
<style>
</style>
<div id="custom-component">
</div>
</template>
<script src="./node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
<script>
class CustomComponent extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });
}
connectedCallback() {
const template = document.querySelector('#custom-component-template');
const instance = template.content.cloneNode(true);
this.shadowRoot.appendChild(instance);
}
}
window.customElements.define('custom-component', CustomComponent);
</script>
<custom-component></custom-component>
</body>
</html>
npx serve
