Your browser doesn't support the features required by impress.js, so you are presented with a simplified version of this presentation.

For the best experience please use the latest Chrome, Safari or Firefox browser.

Web Components with - insert favourite bleeding edge CSS spec -

@divya ★ Slides: nimbu.in/jsconfeu

Web Components

Can I use?

No

Can I experiment?

Yes

Still Interested?

Essentials of Web Components

Shadow DOM

Custom Elements

Definition

<element extends="button" name="x-fancybutton">
<!-- Insert HTML here -->
</element>

Use

<button is="x-fancybutton"></button>

Templates

<template><!-- Insert HTML here --></template>

Regions

Flow content irrespective of document source order

dev.w3.org/csswg/css3-regions/

Syntax

.content {
flow-into: regionflow;
}

.container {
flow-from: regionflow;
}

Variables

Custom CSS property/values

dev.w3.org/csswg/css-variables/

Syntax

section {
var-myproperty: blue;
}

section h1 {
color: var(myproperty);
}

Custom Filters

GLSL Shaders on HTML elements

Filter EffectsFilterLab

Syntax

.banner {
filter: custom(url(/path/to/shader.vs),
parameters, to, pass, to, shader);
}

Same Content, different layouts

Gotchas

More info

Thanks!

nimbu.in/jsconfeu

github.com/nimbupani/webcomponents-demos

Join @testthewebfwd

Oct 26-27, Telecom ParisTech, Paris

Use a spacebar or arrow keys to navigate