Bernardo Cardoso BenOsodrac

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

## WebComponents - ShadowDOM & CustomElements.js
class Card extends HTMLElement {

    constructor() {
        super();

        const shadowRoot = this.attachShadow({mode: 'open'});

        shadowRoot.innerHTML = `
            <style>.card { … }</style>
            <div class="card">…</div>`;

## WebComponents - HTMLModules Export.html
<script type="module">
    let moduleDocument = import.meta.document;

    class HTML5Element extends HTMLElement {
        constructor() {
            super();
        }
    }

    export { HTML5Element };

## WebComponents - HTMLModules Import.html
<html>
    <head>
        <script type="module">
            import { HTML5Element } from "./html5Element.html";
            window.customElements.define("my-html5-element", HTML5Element);
        </script>
    </head>

    <body>
        <my-html5-element></my-html5-element>

## WebComponents - HTMLModules Import.html
<html>
    <head>
        <script type="module">
            import { HTML5Element } from "./html5Element.html";
            window.customElements.define("my-html5-element", HTML5Element);
        </script>
    </head>

    <body>
        <my-html5-element></my-html5-element>

## WebComponents - using ::part.html
<div class="section-title" part="title"></div>

## WebComponents - using ::part.css
osui-section::part(title) {
    border-bottom: 1px solid red;
}

## 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();

## CardSectioned BEM
<div class="card card-sectioned flex-directon-column">
  <div class="card-image"></div>
  <div class="card-sectioned-top flex-direction-column">
      <div class="card-title"></div>
      <div class="card-content"></div>
      <div class="card-bottom"></div>
  </div>
</div>
	osui-card:not(:defined) {
	/* Pre-style, give layout, replicate card's eventual styles, etc. */
	opacity: 0;
	transition: opacity 0.3s ease-in-out;
	}
	const header = document.createElement('header');
	const shadowRoot = header.attachShadow({mode: 'open'});
	shadowRoot.innerHTML = '<h1>Hello Shadow DOM</h1>';
	class Card extends HTMLElement {

	constructor() {
	super();

	const shadowRoot = this.attachShadow({mode: 'open'});

	shadowRoot.innerHTML = `
	<style>.card { … }</style>
	<div class="card">…</div>`;
	<script type="module">
	let moduleDocument = import.meta.document;

	class HTML5Element extends HTMLElement {
	constructor() {
	super();
	}
	}

	export { HTML5Element };
	<html>
	<head>
	<script type="module">
	import { HTML5Element } from "./html5Element.html";
	window.customElements.define("my-html5-element", HTML5Element);
	</script>
	</head>

	<body>
	<my-html5-element></my-html5-element>
	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();
	<div class="card card-sectioned flex-directon-column">
	<div class="card-image"></div>
	<div class="card-sectioned-top flex-direction-column">
	<div class="card-title"></div>
	<div class="card-content"></div>
	<div class="card-bottom"></div>
	</div>
	</div>