web-components.md

theme	transition	title	enableMenu	enableSearch	enableChalkboard	slideNumber
black	slide	Componentes Agnósticos	true	false	true	true

Agnostic Components

Luís Antônio

---

Agnóstico

"Que é adepto ou se pode referir ao agnosticismo." Dicio

---

Por definição

Não depende de nenhuma estrutura.

---

Idealmente

JavaScript, Java, C#, Python e etc.

---

Como nem tudo são flores

---

Web Components (W3C)

Web Components is a suite of different technologies allowing you to create reusable custom elements

---

Technologies

• Custom elements
• Shadow DOM
• HTML templates

---

Custom Elements

<ds-button variant="primary">Login</ds-button>

---

Custom Elements Rules

<my-element>
<open-234>
<html5-🤟>
<input-🥞></input-🥞>

---

Shadow DOM

---

Template

<button onclick="showContent()">Show hidden content</button>

<template>
  <h2>Flower</h2>
  <img src="img_white_flower.jpg" width="214" height="204">
</template>

<script>
function showContent() {
  var temp = document.getElementsByTagName("template")[0];
  var clon = temp.content.cloneNode(true);
  document.body.appendChild(clon);
}
</script>

---

Pause Break

---

Lets go

---

Create a Class for the WC

export class Button extends HTMLElement {
  constructor() {
    super();
  }
}

---

Define the WC name

customElements.define("ds-button", Button);

---

Display innerText

export class Button extends HTMLElement {
  constructor() {
    super();
    this.innerHTML = `<h3>${this.innerText}</h3>`
  }
}

<ds-button>Tonhão</ds-button>

---

Qual o problema disso?

---

Estilo

h3 {
  color: red;
  background-color: blue;
}

---

Shadow DOM

---

Tip

Preferences > Elements > Show user agent shadow

---

HTML under the hood

---

Button JS

const template = document.createElement("template");
template.innerHTML = `<h3><slot></slot></h3>`

export class Button extends HTMLElement {
  constructor() {
    super();
      const shadow = this.attachShadow({ mode: "open" });
      shadow.append(template.content.cloneNode(true));
  }
}

---

Na prática