Web Components and Modular CSS
-
Upload
andrew-rota -
Category
Technology
-
view
654 -
download
1
description
Transcript of Web Components and Modular CSS
![Page 1: Web Components and Modular CSS](https://reader034.fdocuments.us/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.fdocuments.us/reader034/viewer/2022052622/5596efa41a28ab1e778b46be/html5/thumbnails/2.jpg)
Modularity
![Page 3: Web Components and Modular CSS](https://reader034.fdocuments.us/reader034/viewer/2022052622/5596efa41a28ab1e778b46be/html5/thumbnails/3.jpg)
UI Libraries
![Page 4: Web Components and Modular CSS](https://reader034.fdocuments.us/reader034/viewer/2022052622/5596efa41a28ab1e778b46be/html5/thumbnails/4.jpg)
CSS Features
Encapsulation
Scope
Interfaces
Modularity
![Page 5: Web Components and Modular CSS](https://reader034.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/reader034/viewer/2022052622/5596efa41a28ab1e778b46be/html5/thumbnails/30.jpg)
Polyfills
![Page 31: Web Components and Modular CSS](https://reader034.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/reader034/viewer/2022052622/5596efa41a28ab1e778b46be/html5/thumbnails/37.jpg)
}
![Page 38: Web Components and Modular CSS](https://reader034.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/reader034/viewer/2022052622/5596efa41a28ab1e778b46be/html5/thumbnails/42.jpg)
Tooling
![Page 43: Web Components and Modular CSS](https://reader034.fdocuments.us/reader034/viewer/2022052622/5596efa41a28ab1e778b46be/html5/thumbnails/43.jpg)
Frameworks
![Page 44: Web Components and Modular CSS](https://reader034.fdocuments.us/reader034/viewer/2022052622/5596efa41a28ab1e778b46be/html5/thumbnails/44.jpg)
Towards a Component Driven Web
![Page 45: Web Components and Modular CSS](https://reader034.fdocuments.us/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.fdocuments.us/reader034/viewer/2022052622/5596efa41a28ab1e778b46be/html5/thumbnails/46.jpg)