web components and modular css
DESCRIPTION
Given at CSS Dev Conf 2014 in New Orleans on October 14, 2014. This full presentation written with Web Components can be viewed with Chrome 36+ online at http://andrewrota.github.io/web-components-and-modular-css-presentation/presentation/index.html#0. The source of the presentation is available on GitHub: https://github.com/andrewrota/web-components-and-modular-css-presentation.TRANSCRIPT
![Page 1: Web Components and Modular CSS](https://reader034.vdocuments.site/reader034/viewer/2022052622/5596efa41a28ab1e778b46be/html5/thumbnails/1.jpg)
Web Components and Modular CSS
@AndrewRota | CSS Dev Conf 2014
#components
![Page 2: Web Components and Modular CSS](https://reader034.vdocuments.site/reader034/viewer/2022052622/5596efa41a28ab1e778b46be/html5/thumbnails/2.jpg)
Modularity
![Page 3: Web Components and Modular CSS](https://reader034.vdocuments.site/reader034/viewer/2022052622/5596efa41a28ab1e778b46be/html5/thumbnails/3.jpg)
UI Libraries
![Page 4: Web Components and Modular CSS](https://reader034.vdocuments.site/reader034/viewer/2022052622/5596efa41a28ab1e778b46be/html5/thumbnails/4.jpg)
CSS Features
Encapsulation
Scope
Interfaces
Modularity
![Page 5: Web Components and Modular CSS](https://reader034.vdocuments.site/reader034/viewer/2022052622/5596efa41a28ab1e778b46be/html5/thumbnails/5.jpg)
Modular CSS Patterns
BEM
SMACSS
Atomic CSS
OOCSS
![Page 6: Web Components and Modular CSS](https://reader034.vdocuments.site/reader034/viewer/2022052622/5596efa41a28ab1e778b46be/html5/thumbnails/6.jpg)
BEM/* Block */.nav { }
/* Element */.nav__item { }
/* Block with Modifier */.nav--hidden { }
/* Element with Modifier */.nav__item--current { }
![Page 7: Web Components and Modular CSS](https://reader034.vdocuments.site/reader034/viewer/2022052622/5596efa41a28ab1e778b46be/html5/thumbnails/7.jpg)
SMACSS/* Module */.nav { }
/* Module with State */.nav.is-current { }
/* Module with Semantic Element Selector */.nav > h2 { }
/* Layout Style */.l-inline { }
![Page 8: Web Components and Modular CSS](https://reader034.vdocuments.site/reader034/viewer/2022052622/5596efa41a28ab1e778b46be/html5/thumbnails/8.jpg)
Web Components
Web Components usher in anew era of web developmentbased on encapsulated andinteroperable custom elementsthat extend HTML itself. - Polymer
![Page 9: Web Components and Modular CSS](https://reader034.vdocuments.site/reader034/viewer/2022052622/5596efa41a28ab1e778b46be/html5/thumbnails/9.jpg)
Web Components APIs
Custom Elements
HTML Templates
HTML Imports
Shadow DOM
![Page 10: Web Components and Modular CSS](https://reader034.vdocuments.site/reader034/viewer/2022052622/5596efa41a28ab1e778b46be/html5/thumbnails/10.jpg)
Web Components APIs
Custom Elements
HTML Templates
HTML Imports
Shadow DOM
![Page 11: Web Components and Modular CSS](https://reader034.vdocuments.site/reader034/viewer/2022052622/5596efa41a28ab1e778b46be/html5/thumbnails/11.jpg)
Custom Elements
<my-element>Hello World.</my-element>
var MyElement = document.registerElement('my-element', { prototype: Object.create(HTMLElement.prototype)});
![Page 12: Web Components and Modular CSS](https://reader034.vdocuments.site/reader034/viewer/2022052622/5596efa41a28ab1e778b46be/html5/thumbnails/12.jpg)
Web Components APIs
Custom Elements
HTML Templates
HTML Imports
Shadow DOM
![Page 13: Web Components and Modular CSS](https://reader034.vdocuments.site/reader034/viewer/2022052622/5596efa41a28ab1e778b46be/html5/thumbnails/13.jpg)
HTML Templates<template id="my-template"> <p>Hello World.</p> <!-- This image won't be downloaded on page load --> <img src="example.jpg" alt="Example"></template>
document.importNode( document.getElementById('my-template').content, true);
![Page 14: Web Components and Modular CSS](https://reader034.vdocuments.site/reader034/viewer/2022052622/5596efa41a28ab1e778b46be/html5/thumbnails/14.jpg)
Web Components APIs
Custom Elements
HTML Templates
HTML Imports
Shadow DOM
![Page 15: Web Components and Modular CSS](https://reader034.vdocuments.site/reader034/viewer/2022052622/5596efa41a28ab1e778b46be/html5/thumbnails/15.jpg)
HTML Imports<link rel="import" href="/imports/my-component.html">
![Page 16: Web Components and Modular CSS](https://reader034.vdocuments.site/reader034/viewer/2022052622/5596efa41a28ab1e778b46be/html5/thumbnails/16.jpg)
Web Components APIs
Custom Elements
HTML Templates
HTML Imports
Shadow DOM
![Page 17: Web Components and Modular CSS](https://reader034.vdocuments.site/reader034/viewer/2022052622/5596efa41a28ab1e778b46be/html5/thumbnails/17.jpg)
Shadow DOM// Create Shadow Rootdocument.getElementById('my-element').createShadowRoot();// Access Shadow Rootdocument.getElementById('my-element').shadowRoot;
![Page 18: Web Components and Modular CSS](https://reader034.vdocuments.site/reader034/viewer/2022052622/5596efa41a28ab1e778b46be/html5/thumbnails/18.jpg)
User Agent Shadow DOM<video src="#" controls></video>
0:00
![Page 19: Web Components and Modular CSS](https://reader034.vdocuments.site/reader034/viewer/2022052622/5596efa41a28ab1e778b46be/html5/thumbnails/19.jpg)
User Agent Shadow DOM<input type="date">
mm/dd/yyyy
![Page 20: Web Components and Modular CSS](https://reader034.vdocuments.site/reader034/viewer/2022052622/5596efa41a28ab1e778b46be/html5/thumbnails/20.jpg)
Shadow DOMShadow DOM.
Light DOM.<div id="my-first-element"></div><p>Light DOM.</p>
// Create Shadow Rootvar s = document.getElementById('my-first-element').createShadowRoot// Add Styles and Texts.innerHTML += '<style>p { color: crimson; margin: 5px 0 5px 0;}</style>'s.innerHTML += '<p>Shadow DOM.</p>';
![Page 21: Web Components and Modular CSS](https://reader034.vdocuments.site/reader034/viewer/2022052622/5596efa41a28ab1e778b46be/html5/thumbnails/21.jpg)
Content Insertion Points<div id="my-second-element"> <content></content></div>
![Page 22: Web Components and Modular CSS](https://reader034.vdocuments.site/reader034/viewer/2022052622/5596efa41a28ab1e778b46be/html5/thumbnails/22.jpg)
Shadow DOM and <content>Shadow DOM Start.
Hello!Shadow DOM End.<div id="my-second-element"><p>Hello!</p></div>
var s = document.getElementById('my-second-element').createShadowRoots.innerHTML += '<p>Shadow DOM Start.</p>';s.innerHTML += '<style>p { color: crimson; margin: 5px 0; }</style>'s.innerHTML += '<content></content>';s.innerHTML += '<p>Shadow DOM End.</p>';
![Page 23: Web Components and Modular CSS](https://reader034.vdocuments.site/reader034/viewer/2022052622/5596efa41a28ab1e778b46be/html5/thumbnails/23.jpg)
Multiple <content> ElementsHello, CSS Dev Conf!
<div id="my-third-element"> <span class="name">CSS Dev Conf</span> <span class="greeting">Hello</span></div>
var s = document.getElementById('my-third-element').createShadowRoots.innerHTML += '<content select=".greeting"></content>, ';s.innerHTML += '<content select=".name"></content>!';
![Page 24: Web Components and Modular CSS](https://reader034.vdocuments.site/reader034/viewer/2022052622/5596efa41a28ab1e778b46be/html5/thumbnails/24.jpg)
Into the Light/* pseudo-class for host element*/:host { }/* functional pseudo-class, for host if it matches the selector argument */:host() { }/* functional pseudo-class, for host node with parent that matches selector argument */:host-context() { }/* pseudo-element, for distributed notes rendered via a <content> element */::content { }
![Page 25: Web Components and Modular CSS](https://reader034.vdocuments.site/reader034/viewer/2022052622/5596efa41a28ab1e778b46be/html5/thumbnails/25.jpg)
Into the Dark/* pseudo-element for shadow roots */::shadow { }
/* combinator for selecting through shadow boundaries */body /deep/ p { }
[/deep/] is basically a super-descendant combinator.- CSS Scoping Module Draft, Issue 6
![Page 26: Web Components and Modular CSS](https://reader034.vdocuments.site/reader034/viewer/2022052622/5596efa41a28ab1e778b46be/html5/thumbnails/26.jpg)
Let's Write a ComponentHello world, I am a web component.
<link rel="import" href="../assets/hello-world.html">
<hello-world>I am a <strong>web component</strong></hello-world
![Page 27: Web Components and Modular CSS](https://reader034.vdocuments.site/reader034/viewer/2022052622/5596efa41a28ab1e778b46be/html5/thumbnails/27.jpg)
Let's Write a ComponentHello world, I am a web component.
<template id="hw"> <style> ::content strong { color: crimson; } p { margin: 2px 20px 2px 0; } :host { border: 1px solid FireBrick; display: block; margin-right .hello { color: #91D4D; } </style> <p><span class="hello">Hello world</span>, <content></content</template>
![Page 28: Web Components and Modular CSS](https://reader034.vdocuments.site/reader034/viewer/2022052622/5596efa41a28ab1e778b46be/html5/thumbnails/28.jpg)
Let's Write a ComponentHello world, I am a web component.
var importedDoc = document.currentScript.ownerDocument;var elementPrototype = Object.create(HTMLElement.prototype);elementPrototype.createdCallback = function() { var template = importedDoc.getElementById('hw').content; var clone = document.importNode(template, true); this.createShadowRoot().appendChild(clone);};document.registerElement('hello-world', {prototype: elementPrototype
![Page 29: Web Components and Modular CSS](https://reader034.vdocuments.site/reader034/viewer/2022052622/5596efa41a28ab1e778b46be/html5/thumbnails/29.jpg)
Can I Use???Custom
ElementsHTML
TemplatesHTML
ImportsShadow
DOM
✓ ✓ ✓ ✓
✓ ✓ ✓ ✓
Flag ✓ Flag Flag
X ✓ X X
X X X X
![Page 30: Web Components and Modular CSS](https://reader034.vdocuments.site/reader034/viewer/2022052622/5596efa41a28ab1e778b46be/html5/thumbnails/30.jpg)
Polyfills
![Page 31: Web Components and Modular CSS](https://reader034.vdocuments.site/reader034/viewer/2022052622/5596efa41a28ab1e778b46be/html5/thumbnails/31.jpg)
When To Use Web Components?
Third Party Widgets?
Third Party UI Libraries?
Internal UI Libraries?
Web Component All the Things!?
![Page 32: Web Components and Modular CSS](https://reader034.vdocuments.site/reader034/viewer/2022052622/5596efa41a28ab1e778b46be/html5/thumbnails/32.jpg)
Third Party Widgets<google-map latitude="29.954356" longitude="-90.067863"></google-map>
![Page 33: Web Components and Modular CSS](https://reader034.vdocuments.site/reader034/viewer/2022052622/5596efa41a28ab1e778b46be/html5/thumbnails/33.jpg)
Third Party UI Libraries
<paper-radio-group selected="css"> <paper-radio-button name="css" label="CSS"></paper-radio-button</paper-radio-group>
<paper-slider value="10"></paper-slider>
CSS HTML JS
![Page 34: Web Components and Modular CSS](https://reader034.vdocuments.site/reader034/viewer/2022052622/5596efa41a28ab1e778b46be/html5/thumbnails/34.jpg)
Third Party UI Libraries
<paper-input label="Type something here." required error="This is a required field." layout="" vertical="" class="invalid"></paper-input>
This is a required field.
Type something here.
![Page 35: Web Components and Modular CSS](https://reader034.vdocuments.site/reader034/viewer/2022052622/5596efa41a28ab1e778b46be/html5/thumbnails/35.jpg)
Styling UI Librariespaper-slider { width: 95%;}paper-slider::shadow #sliderBar::shadow #activeProgress { background-color: #91D4D4;}paper-slider::shadow #sliderKnobInner { background-color: #b68abd;}paper-slider::shadow #sliderKnobInner::before { background-color: #b68abd;}paper-slider::shadow #sliderKnobInner::after { color: #b68abd;}
![Page 36: Web Components and Modular CSS](https://reader034.vdocuments.site/reader034/viewer/2022052622/5596efa41a28ab1e778b46be/html5/thumbnails/36.jpg)
Styling UI Libraries (Sass)paper-slider { width: 95%; &::shadow { #sliderBar::shadow #activeProgress { background-color: $quinary; } #sliderKnobInner { background-color: $quaternary; &::before { background-color: $quaternary } &::after { color: $quaternary; } } }
![Page 37: Web Components and Modular CSS](https://reader034.vdocuments.site/reader034/viewer/2022052622/5596efa41a28ab1e778b46be/html5/thumbnails/37.jpg)
}
![Page 38: Web Components and Modular CSS](https://reader034.vdocuments.site/reader034/viewer/2022052622/5596efa41a28ab1e778b46be/html5/thumbnails/38.jpg)
Internal UI Libraries<cssdevconf-menu> <cssdevconf-menu-item>Home</cssdevconf-menu-item> <cssdevconf-menu-item selected>About</cssdevconf-menu-item> <cssdevconf-menu-item>Contact Us</cssdevconf-menu-item></cssdevconf-menu>
<cssdevconf-login-form ajax url="login.php"></cssdevconf-login-form>
![Page 39: Web Components and Modular CSS](https://reader034.vdocuments.site/reader034/viewer/2022052622/5596efa41a28ab1e778b46be/html5/thumbnails/39.jpg)
Web Component Everything??<cssdevconf-app> <cssdevconf-menu></cssdevconf-menu> <cssdevconf-content></cssdevconf-content> <cssdevconf-footer></cssdevconf-footer></cssdevconf-app>
![Page 40: Web Components and Modular CSS](https://reader034.vdocuments.site/reader034/viewer/2022052622/5596efa41a28ab1e778b46be/html5/thumbnails/40.jpg)
Probably Not (and that's OK)
I don't ever see us going all inon Custom Elements for everypossible thing ... Use nativeelements and controls whenpossible and supplement withcustom elements. - Joshua Peek, Github Programmer
![Page 41: Web Components and Modular CSS](https://reader034.vdocuments.site/reader034/viewer/2022052622/5596efa41a28ab1e778b46be/html5/thumbnails/41.jpg)
Small
Open for Extension
Documented
Unit Tested
Accessible
Responsive
Best Practices
![Page 42: Web Components and Modular CSS](https://reader034.vdocuments.site/reader034/viewer/2022052622/5596efa41a28ab1e778b46be/html5/thumbnails/42.jpg)
Tooling
![Page 43: Web Components and Modular CSS](https://reader034.vdocuments.site/reader034/viewer/2022052622/5596efa41a28ab1e778b46be/html5/thumbnails/43.jpg)
Frameworks
![Page 44: Web Components and Modular CSS](https://reader034.vdocuments.site/reader034/viewer/2022052622/5596efa41a28ab1e778b46be/html5/thumbnails/44.jpg)
Towards a Component Driven Web
![Page 45: Web Components and Modular CSS](https://reader034.vdocuments.site/reader034/viewer/2022052622/5596efa41a28ab1e778b46be/html5/thumbnails/45.jpg)
Thanks!
Resources- WebComponents.org- Web Components: A Tectonic Shift for Web Development by Eric Bidelman- Web Components by Jarrod Overson and Jason Strimpel- Ten Principles for Great General Purpose Web Components
Colophon
This presentation was built with Shadow DOM, HTML Templates, HTMLImports, and the Custom Elements <slide-show> and <slide-content>using Web Component Slides.
![Page 46: Web Components and Modular CSS](https://reader034.vdocuments.site/reader034/viewer/2022052622/5596efa41a28ab1e778b46be/html5/thumbnails/46.jpg)