Web Componente Typescript
https://mellowdevs.medium.com/web-components-using-vanilla-js-f7af00834caa https://www.section.io/engineering-education/how-to-create-a-web-component-with-vanilla-javascript/
Created
November 28, 2023 14:16
-
-
Save leandrodaher/f5beb2d3b9082ba229153c1c286325d7 to your computer and use it in GitHub Desktop.
Web Componente Typescript
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const template = document.createElement("template"); | |
| template.innerHTML = ` | |
| <style> | |
| <style> | |
| .employee-card { | |
| font-family: sans-serif; | |
| background: #f4f6f7; | |
| width: 250px; | |
| display: grid; | |
| grid-template-columns: 1fr; | |
| margin-bottom: 10px; | |
| } | |
| </style> | |
| <div class="employee-card"> | |
| <img/> | |
| <div> | |
| <h3></h3> | |
| <div class="details"> | |
| <p><slot name="id"/></p> | |
| <p><slot name="job title"/></p> | |
| <p><slot name="email"/></p> | |
| <p><slot name="phone"/></p> | |
| </div> | |
| </div> | |
| </div>`; | |
| export class EmployeeCard extends HTMLElement { | |
| private h3: string | null = ''; | |
| constructor() { | |
| super(); | |
| this.attachShadow({ mode: "open" }); | |
| // https://bobbyhadz.com/blog/typescript-type-null-is-not-assignable-to-type-string | |
| // https://bobbyhadz.com/blog/typescript-object-is-possibly-null | |
| // https://bobbyhadz.com/blog/typescript-object-is-possibly-null | |
| this.shadowRoot!.appendChild(template.content.cloneNode(true)); | |
| this.shadowRoot!.querySelector("h3")!.innerText = this.getAttribute("name")!; | |
| this.shadowRoot!.querySelector("img")!.src = this.getAttribute("avatar")!; | |
| } | |
| connectedCallback() { | |
| this.h3 = this.getAttribute("name"); | |
| this.render(); | |
| } | |
| render() { | |
| this.h3; | |
| } | |
| } | |
| export class MyCircle extends HTMLElement { | |
| private shadow: ShadowRoot; | |
| constructor() { | |
| super(); | |
| this.shadow = this.attachShadow({mode: 'open'}); | |
| } | |
| connectedCallback() { | |
| this.render(); | |
| } | |
| render() { | |
| this.shadow.innerHTML = ` | |
| <style> | |
| .circle { | |
| width: 100px; | |
| height: 100px; | |
| background-color: red; | |
| border-radius: 50%; | |
| } | |
| </style> | |
| <div> | |
| <h2>My Circle</h2> | |
| <div class="circle" id='circle'></div> | |
| </div> | |
| `; | |
| } | |
| } | |
| export start() { | |
| window.customElements.define('my-circle', MyCircle); | |
| window.customElements.define("employee-card", EmployeeCard); | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>Vite + TS</title> | |
| </head> | |
| <body> | |
| <my-circle></my-circle> | |
| <employee-card name="Leah Crystal" avatar=image.png></employee-card> | |
| <div slot="id"><b>ID:</b> 238</div> | |
| <div slot="job title"><b>Job Title:</b> Database Administrator</div> | |
| <div slot="email"><b>Email:</b> [email protected]</div> | |
| <div slot="phone"><b>Phone:</b> 292-856-410</div> | |
| <script type="module" src="/src/main.ts"></script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import { MyCircle, EmployeeCard, start } from './components.ts' | |
| start(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment