and know a brief about them...
@_gokatz
gokatz.me
let template = document.querySelector("#sparkle-button"); class SparkleButton extends HTMLElement { constructor() { super(); let shadowRoot = this.attachShadow({ mode: "open" }); shadowRoot.appendChild(template.content.cloneNode(true)); } } window.customElements.define("sparkle-button", SparkleButton);
<template id="sparkle-button"> <style> :host { border: 1px solid gold; padding: 10px; border-radius: 4px; } img { vertical-align: bottom; margin-right: 5px; } </style> <img src="https://cdn.glitch.com/d10331b6-8e16-4707-a44f-8618eedaec9b%2Fclean.png?v=1613101084565" height="20px" width="20px" /> <slot></slot> </template> <sparkle-button> Click Me! </sparkle-button>
if (user) { return (<h1> Hello, {formatName(user)}! </h1>); } return <h1>Hello, Stranger.</h1>;
<ul> { users.map((user) => { return <li>{user.name}</li>; }); } </ul>
npm init stencil
https://stenciljs.com/docs/getting-started
https://www.webcomponents.org/introduction
https://webcomponents.dev/
https://webcomponents.dev/blog/all-the-ways-to-make-a-web-component/
By Gokul Kathirvel
A fellow human 💕 Love building things over the web... 💕 doing Ember and Vue @zoho!!! Curated @emberjstweet 🐹🤖 with 🔥