0.0.9 • Published 5 years ago
dispatcher-button v0.0.9
dispatcher-button web component
This is a web component that triggers an event to document on click
Attributes
| Attribute | Type | Detail |
|---|---|---|
| clk | String | Event name to be triggered |
Usage
HTML
<body>
<main-page></main-page>
<script src="./main.js" type="module"></script>
</body>JS (main.js)
import "/node_modules/dispatcher-button/dispatcher-button.js";
class MainPage extends HTMLElement {
constructor() {
super();
this.shadow = this.attachShadow({ mode: 'open' });
this.watch();
}
watch() {
document.addEventListener("button-clicked", (e) => {
let clickEvent = e.detail.e;
alert("button is clicked");
})
}
connectedCallback() {
this.shadow.innerHTML = "";
const templateEl = document.createElement("template");
templateEl.innerHTML = this.template;
this.shadow.appendChild(templateEl.content.cloneNode(true));
}
get template() {
return `
<dispatcher-button clk="button-clicked" >
<p> I'm a dispatcher button </p>
</dispatcher-button>
`;
}
}
customElements.define("main-page", MainPage);This example uses ES6 module, in order to test it you run a server (live-server, http-server...)