Hi I am Ada from Samsung, i'm here to talk to you about Web Components

My goals today are 3 fold:

What are Web Components?

Custom Elements

Shadow DOM

Scoped css

JS Callbacks

Web Components are a way of encapsulating logic and style into components you can author with HTML.

You can tell them apart from normal HTML elements because they have a dash in the name.

They provide 3 useful powers for seperating your concerns.

Advantages of Web Component


<div> <div> <div> <div>

Emmet Demo


CSS Grid

Simpler layouts enabled with Web Components.

Building components

Live Demo of:

Hello World

Note: Style scoping not possible with polyfill.

Live Demo of:

Hello World

Using the Polyfill


  • Shadow DOM
  • Custom Elements
  • Scoped CSS (Needs some user work)

Handling the CSS Scoping

Completed example component.

by Monica Dinculescu (@notwaldorf)


Case study, VJ-OTG


Case study, VJ-OTG

"VJ-OTG, is a Web App to use WebAudio, WebMidi & WebGL to produce visualisations for night clubs."

The Challenge:

  • Connect together very different pieces of technology
  • Be highly configurable in how they interact
  • Be simple to configure.

Building a whole app using just components

HTML holds the initial app state.

Static or rendered on the server.

Old school seperation of concerns html/css/js Modern speration of concerns is component based.

Migrating an Existing App

Lego Repair by Jan Vormann

Lego Street Repairs by Jan Vormann


Slide Deck:

What are web components
Encapsulate logic, tied to DOM life cycle
What advantages do they provide
Emmet Code `ul>li*3`, Logic Encapsulation, Style Encapsulation, When used one off, when used together
Using them today
Polyfill, Shady Dom
A case study, VJ-OTG
What did we learn from this?
How I use Web Components
Building components that work together
Using HTML as the configuration layer
Migrating to using web components
Web Components work within existing frame works because they are just HTML.
A final case study, look ma no DOM
Using Web Components to wrap three.js