Web Components

• <template>
• Shadow DOM
• Custom Elements
• HTML Imports

<template>

• W3C Recommendation
• Part of HTML 5.1
• Browser support:

Shadow DOM

• All browser vendors agreed
• .. on V1

Shadow DOM V1

What's New in Shadow DOM v1 (by examples) hayato.io/2016/shadowdomv1/ by Hayato Ito - spec editor, Chromium dev

<content select=".css[selector]">

<slot name="my-name">

<div slot="my-name">

element.createShadowRoot();

element.attachShadow({ mode: 'open' });

let olderShadowRoot = e.createShadowRoot();
let youngerShadowRoot = e.createShadowRoot(); 

<slot name='slot2'>
  <div id='fallback2'></div>
</slot>

Shadow DOM V1

What's New in Shadow DOM v1 (by examples) hayato.io/2016/shadowdomv1/ by Hayato Ito - spec editor

#element::content .selector

#element::slotted(.selector)

#element /deep/ .selector

<slot>

Custom Elements

• All browser vendors agreed
• .. on V1 - again

Custom Elements v1

Reintroducing Custom Elements V1 webreflection.co.uk/blog/2016/08/21/custom-elements-v1 by Andrea Giammarchi - author of CEv1 polyfill

document.registerElement('my-element', prototype);

customElements.define('my-element', Class);

document.registerElement('my-element', {
	/*...*/,
	extends: 'button'
});

customElements.define('my-element',
	class extends HTMLButtonElement {
		/*...*/
	},
	{extends: 'button'}
);

Custom Elements V1

createdCallback = function(){/*...*/}

constructor(){ super(); /*...*/}

attachedCallback

detachedCallback

connectedCallback

disconnectedCallback

attributeChangedCallback

static get observedAttributes() {
    return ['attrName'];
}

Custom Elements

is="v1"

• Safari will not ship

  is

  in V1
• Other vendors will
• It's still in spec
• It's still in polyfill

HTML Imports

• Spec is on hold
• Polyfills are still supported
• Easy to polyfill
• W3C wants to provide such feature
• ... in cleaner form
• ... co-op with ES6 modules

Polymer 2.0

• Preview available
• Build on top of WebComponents v1
• Hybrid mode
• 1.7 is forward compat. w/ V1
• Data-binding is claimed to be fixed
• Does not use

  is

  (

  <dom-bind>

  )

Migrations

• Polymer elements via:

  1.7->Hybrid->2.0

  Hybrid should work with 1.7, 2.0, v0 and v1

• Vanilla elements
  • Chrome runs v0 & v1
  • Polyfilled CE - Andrea's

    document-register-element

    should make v0 & v1 run side by side
  • Polyfilled SD - ?
• SC will update WC.js@v1 & Polymer@2.0 only after all our elements will be ready
• ... it will be available at branch/flag/upgrade appl

Custom (CSS) Properites

Editor’s Draft, 13 December 2016

• CSS variables
• Styling Custom Elements

# my-element's Shadow DOM
<style>
:host{
  --my-element-title-color: red;
}
.title {
  color: var(--my-element-title-color);
}
</style>
<h3 class="title">I'm a .title from Shadow DOM</h3>

<style>
  .some-class{
    --my-element-title-color: blue;
  }
</style>
<my-element class="some-class"></my-element>

CSS @apply

A Collection of Interesting Ideas, 18 September 2016

tabatkins.github.io/specs/css-apply-rule/

• CSS mixins
• Styling Custom Elements ♥

:root,
.scope,
my-element{
  --my-button: {
	  min-width: 5.14em;
	  margin: 0 0.29em;
	  /* any rules */
	  padding: 0.7em 0.57em;
	  @apply --shadow-elevation-2dp;
  };
}

/* my-element Shadow DOM*/
.button {
  @apply --my-button;
}

::part()

idea in W3C WebPlatform WG

github.com/w3c/webcomponents/issues/300

• Custom pseudo-element selector
• SD (CE) exposing API for styling it's shadow children

<date-range-selector>
  <!-- #shadow-root -->
    <div id="container">
      <input part="start-date" id="start-date" type="date">
    </div>
  <!-- /shadow-root -->
</date-range-selector>

date-range-selector::part(start-date){
  /* normal styles */
}

Custom (HTML) Attributes

idea at W3C WebPlatform WG issues

• Addresses is issue
• Mixins for HTML Elements

class FooBarAttr {
  attachedCallback() {
    console.log('was created for first time');
  }

  changedCallback(newValue, oldValue) {
    console.log('it changed');
  }
}
customAttributes.define('foo-bar', FooBarAttr);

CSS Grid Layout

THE Way to create layouts

See my presenation from Meet.js Summit 2016

.fb-layout {
  display: grid;
  grid: "head head"   3em
        "nav  subnav" auto
        "nav  main"   1fr
        "foot foot"
       / 5em 1fr;
}

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}

CSS Grid Layout

W3C	✓
Chrome	✓
Opera	✓
Firefox	✓
Safari TP	•	⚑ behind the flag
IE/Edge	•	Old spec supported for years. "High priority" for upgrade