Web Components

by @leocaseiro

slides.com/leocaseiro/web-components

Leo + case + iron

slides.com/leocaseiro/web-components

Another JS Framework?

https://twitter.com/michaellnorth/status/720030263905005568

slides.com/leocaseiro/web-components

State of JS (Interested)

2019.stateofjs.com/front-end-frameworks

slides.com/leocaseiro/web-components

2019.stateofjs.com/front-end-frameworks/other-tools

slides.com/leocaseiro/web-components

Why React is so popular?

  • Reusable components
  • Easy to get started
  • Browser support (IE8)
  • Performance

https://www.youtube.com/watch?v=GW0rj4sNH2w

slides.com/leocaseiro/web-components

JSConfUS 2013
Tom Occhino and Jordan Walke: JS Apps at Facebook

https://omny.fm/shows/future-of-coding/1-1-how-reactjs-was-created-with-pete-hunt

Things we accept in React 

  • Compile (Webpack/Babel/Parcel)
  • JSX (htmlFor, className, ...junk)
  • CSS in JS (hashes)
  • Can't use outside React

  hate

slides.com/leocaseiro/web-components

In Jun 2015, I was using SMACSS
Scalable Modular Architecture for CSS
smacss.com

slides.com/leocaseiro/web-components

slides.com/leocaseiro/web-components

slides.com/leocaseiro/web-components

React: CSS in your JS by Christopher Chedeau

slides.com/leocaseiro/web-components

Answer: CSS in JS

SHADOW DOM

https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM

slides.com/leocaseiro/web-components

What is Shadow DOM?

developers.google.com/web/fundamentals/web-components/shadowdom

slides.com/leocaseiro/web-components

  • Isolated DOM: A component's DOM is self-contained (e.g. document.querySelector() won't return nodes in the component's shadow DOM).
  • Scoped CSS: CSS defined inside shadow DOM is scoped to it. Style rules don't leak out and page styles don't bleed in.
  • Composition: Design a declarative, markup-based API for your component.
  • Simplifies CSS - Scoped DOM means you can use simple CSS selectors, more generic id/class names, and not worry about naming conflicts.
  • Productivity - Think of apps in chunks of DOM rather than one large (global) page.

slides.com/leocaseiro/web-components

slides.com/leocaseiro/web-components

Shadow DOM Tree

https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM

Shadow DOM example

slides.com/leocaseiro/web-components

A Guide to Working with Shadow DOM using Selenium

slides.com/leocaseiro/web-components

medium.com/rate-engineering/a-guide-to-working-with-shadow-dom-using-selenium-b124992559f

by Natania Djohari

CSS in JS Libraries 2020

  • Aphrodite
  • Emotion
  • Glamor
  • Glamorous (dead)
  • Fela
  • JSS
  • Linaria
  • Radium
  • Styled components
  • Styletron

https://blog.bitsrc.io/9-css-in-js-libraries-you-should-know-in-2018-25afb4025b9b

slides.com/leocaseiro/web-components

CSS in JS 2020
using Shadow DOM 

attachShadow
ShadowRoot

github.com/Khan/aphrodite/issues/194

github.com/styled-components/styled-components/issues/659

github.com/emotion-js/emotion/issues/388

slides.com/leocaseiro/web-components

Shadow DOM
styled-components HACK

github.com/styled-components/styled-components/issues/659#issuecomment-322320926

slides.com/leocaseiro/web-components

Web Components

HTML Templates

slides.com/leocaseiro/web-components

Custom Elements

Shadow DOM

Custom Element

class WordCount extends HTMLElement {
  constructor() {
    // Always call super first in constructor
    super();

    // Element functionality written in here
  }
}

slides.com/leocaseiro/web-components

Custom Element

class WordCount extends HTMLParagraphElement {
   // ...
}
customElements.define('word-count', WordCount, { extends: 'p' });

<word-count></word-count>

slides.com/leocaseiro/web-components

Custom Elements

Lifecycle callbacks

  • connectedCallback()
     
  • disconnectedCallback()
     
  • adoptedCallback()
    Invoked component is moved to a new document.
     
  • attributeChangedCallback()
    Invoked added, removed, or changed.

slides.com/leocaseiro/web-components

slides.com/leocaseiro/web-components

mdn.github.io/web-components-examples/life-cycle-callbacks

update.onclick = function() {
  // Randomly update square's attributes
  square.setAttribute('l', random(50, 200));
  square.setAttribute('c', `rgb(${random(0, 255)}, ${random(0, 255)}, ${random(0, 255)})`);
};

Shadow DOM

// Create a shadow root
var shadow = this.attachShadow({ mode: 'open' });


// Create some CSS to apply to the shadow dom
var style = document.createElement('style');

style.textContent = `
  .custom {
    color: red
  }
`;

// attach the created elements to the shadow dom
shadow.appendChild(style);

slides.com/leocaseiro/web-components

Shadow DOM example

slides.com/leocaseiro/web-components

HTML Templates

<template id="my-paragraph">
  <p>My paragraph</p>
</template>
let template = document.getElementById('my-paragraph');
let templateContent = template.content;
document.body.appendChild(templateContent);

slides.com/leocaseiro/web-components

mdn.github.io/web-components-examples/element-details

slides.com/leocaseiro/web-components

slides.com/leocaseiro/web-components

IE11 - github.com/webcomponents/polyfills

Live Code

slides.com/leocaseiro/web-components

Web Components

https://eqt1x.csb.app/

App Demo

slides.com/leocaseiro/web-components

slides.com/leocaseiro/web-components

TODO App Examples

github.com/shprink/web-components-todo

slides.com/leocaseiro/web-components

Convert React into Web Components

github.com/ChristophP/web-react-components

Create Web Components using React

direflow.io

slides.com/leocaseiro/web-components

Conclusion

Be aware, that popular languages and libraries get replaced

iframes, table layouts, css float layout, ...

slides.com/leocaseiro/web-components

  • Visual Basic
  • ASP3
  • PHP
  • ActionScript (Flash)
  • Silverlight
  • Ajax
  • XML
  • jQuery
  • GruntJS
  • Gulp
  • AngularJS

References

slides.com/leocaseiro/web-components

Questions?

slides.com/leocaseiro/web-components

@leocaseiro

slides.com/leocaseiro/web-components

Made with Slides.com