Bernardo Cardoso BenOsodrac

## WebComponents - creating ShadowDOM.js
const header = document.createElement('header');
const shadowRoot = header.attachShadow({mode: 'open'});
shadowRoot.innerHTML = '<h1>Hello Shadow DOM</h1>';

## WebComponents - styling customElement.css
osui-card:not(:defined) {
  /* Pre-style, give layout, replicate card's eventual styles, etc. */
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

## WebComponents - extended button.html
<button is="osui-button"></button>

## WebComponents - extending HTMLElement.js
class OSUIButton extends HTMLButtonElement {…}

customElements.define('osui-button', OSUIButton {extends: 'button'});

## WebComponents - extending custom element.js
class CardSectioned extends Card {…}

customElements.define('osui-card-sectioned', CardSectioned );

## WebComponents - OSUICard JS API.js
class Card extends HTMLElement {

    // A getter/setter for a disabled property.
    get disabled() {
      return this.hasAttribute('disabled');
    }

    constructor() {
      // Always call super() first! This is specific to Custom Element and required by the spec.
      super();

## WebComponents - OSUICard define.js
class Card extends HTMLElement {}

customElements.define('osui-card', Card);

## WebComponents - OSUICard.html
<osui-card></osui-card>

## WebComponents - template render.js
const template = document.querySelector('template');
const node = document.importNode(template.content, true);
document.body.appendChild(node);

## WebComponents - template.html
<template>
  <h1>Hello world</h1>
</template>
	const header = document.createElement('header');
	const shadowRoot = header.attachShadow({mode: 'open'});
	shadowRoot.innerHTML = '<h1>Hello Shadow DOM</h1>';
	osui-card:not(:defined) {
	/* Pre-style, give layout, replicate card's eventual styles, etc. */
	opacity: 0;
	transition: opacity 0.3s ease-in-out;
	}
	class OSUIButton extends HTMLButtonElement {…}

	customElements.define('osui-button', OSUIButton {extends: 'button'});
	class CardSectioned extends Card {…}

	customElements.define('osui-card-sectioned', CardSectioned );
	class Card extends HTMLElement {

	// A getter/setter for a disabled property.
	get disabled() {
	return this.hasAttribute('disabled');
	}

	constructor() {
	// Always call super() first! This is specific to Custom Element and required by the spec.
	super();
	class Card extends HTMLElement {}

	customElements.define('osui-card', Card);
	const template = document.querySelector('template');
	const node = document.importNode(template.content, true);
	document.body.appendChild(node);