leandrodaher/README.MD

## README.MD

      
    Raw
  

              README.MD
            
          
    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/

  
## components.ts
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);
}

## index.html
<!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> lcrystal34@gmail.com</div>
    <div slot="phone"><b>Phone:</b> 292-856-410</div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>

## index.ts
import { MyCircle, EmployeeCard, start } from './components.ts'

start();
	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);
	}
	<!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> lcrystal34@gmail.com</div>
	<div slot="phone"><b>Phone:</b> 292-856-410</div>
	<script type="module" src="/src/main.ts"></script>
	</body>
	</html>
	import { MyCircle, EmployeeCard, start } from './components.ts'

	start();