Ensuring Design Standards with Web Components

Ensuring Design Standards with
Web Components
University of Illinois WebCon – April 5, 2018
John Riviello
@JohnRiv
Chris Lorenzo
@Chiefcll

"Notebook beside the iPhone on Table" by PicJumbo is licensed under CC0 1.0

WHY?!?
1. Communication
2. Deviations
"Alone" by Pixabay is licensed under CC0 1.0

“Designers should build
products that solve needs
instead of spending time on
reinventions”
- Jack Zankowski
Creative Director, Comcast XD

"Mask, Ancient Artifact" by Pedro_Teixeira is licensed under CC0 1.0

"Abstract Business Code" by Pixabay is licensed under CC0 1.0

“And You Thought
Buttons Were Easy?”
- Nathan Curtis
Source: https://medium.com/eightshapes-llc/and-you-thought-buttons-were-easy-26eb5b5c1871

$100/hour x 200 hours =
$20,000

$20,000 x 50 teams =
$1,000,000

"Books on Shelf in Library" by Pixabay is licensed under CC0 1.0

118 contributors
245 contributors
707 contributors

“A design system’s value is
realized when products ship
features using parts from
the system.”
- Nathan Curtis
Source: https://medium.com/eightshapes-llc/a-design-system-isn-t-a-project-it-s-a-product-serving-products-74dcfffef935

Design
System
Design &
Development
Source: http://atomicdesign.bradfrost.com/chapter-5/
Website
Pattern
Library
Make changes to a pattern
Applications and pattern library
both update to reflect changes

#UseThePlatform
- Polymer Motto

Existing Frameworks
Applications
Web Platform
Web Components built with Polymer (or not)

What Are Web Components?
Ensuring Design Standards with Web Components - @JohnRiv @chiefcll36
4 Specs

37
Custom Elements
Ensuring Design Standards with Web Components - @JohnRiv @chiefcll

38
Custom Elements
•Provides a way for authors to build their own
fully-featured DOM elements.
<paper-tabs selected="0" scrollable>
<paper-tab>The first tab</paper-tab>
<paper-tab>Tab two</paper-tab>
<paper-tab>The third tab</paper-tab>
<paper-tab>Fourth tab</paper-tab>
</paper-tabs>

39 Ensuring Design Standards with Web Components - @JohnRiv @chiefcll

40
HTML Imports

41
HTML Imports
• Means to import custom elements
- <link rel="import" href="paper-tabs.html">
• Built-in deduplication
• Componetize the HTML, CSS & JavaScript
• Will be replaced by ES6 Modules
- import "paper-tabs.js"

42
HTML Imports
• Means to import custom elements
- <link rel="import" href="paper-tabs.html">
• Built-in deduplication
• Componetize the HTML, CSS & JavaScript
• Will be replaced by ES6 Modules
- import "paper-tabs.js"

44
Templates

45
• Used to declare fragments of HTML
- <template id="tab">
<div class="tab-content"></div>
</template>
• The element itself renders nothing
• Can be cloned and inserted in the document via
JavaScript, which will render the content
Templates

47
Shadow DOM

48
•Allows you to take a DOM subtree and
hide it from the document scope
•Hides CSS styles as well
•Common examples from HTML5 include:
<select>, <video>, & <input type="date">
Shadow DOM

Source: https://www.webcomponents.org/element/PolymerElements/paper-tabs

Source: https://ebidel.github.io/material-playground/

How do I build my
Design System
using Polymer?

“A style guide is an artifact of design
process. A design system is a living,
funded product with a roadmap &
backlog, serving an ecosystem.”
- Nathan Curtis
Source: https://twitter.com/nathanacurtis/status/656829204235972608

You Need a TeamYou Need a Team

“Establish a high-quality,
brand-aligned experience across
our product through human
guidance and internal tools.”
- Jina Anne
Source: https://medium.com/salesforce-ux/the-salesforce-team-model-for-scaling-a-design-system-d89c2a2d404b
Salesforce.com Design Systems Team Objective:

"Person Workshop" is licensed under CC0 1.0 / Adjusted from original

Building Your Design System with Polymer
CSS
IS
AWESOME
60
Source: https://philipwalton.github.io/talks/2015-10-26/#7
• Managing global names
• Scoping/isolating styles
• Specificity conflicts
• Unpredictable matching
• Managing style
dependencies
• Removing unused code

my-element.html:
<link rel="import"
href="bower_components/polymer/polymer-element.html">
<dom-module id="my-element">
<template>
<style>
/* My Element Styles */
</style>
<p>Shadow DOM is awesome</p>
</template>
<script>
class MyElement extends Polymer.Element {
static get is() { return 'my-element'; }
}
window.customElements.define(MyElement.is,
MyElement);
</script>
</dom-module>

my-element.html:
<link rel="import"
<template>
<style>
</style>
</template>
<script>
}
MyElement);
</script>
</dom-module>
Import Polymer.Element

my-element.html:
<link rel="import"
<template>
<style>
</style>
</template>
<script>
}
MyElement);
</script>
</dom-module>
Styles we’ll be modifying

my-element.html:
<link rel="import"
<template>
<style>
</style>
</template>
<script>
}
MyElement);
</script>
</dom-module>
Template contains <p>

my-element.html:
<link rel="import"
<template>
<style>
</style>
</template>
<script>
}
MyElement);
</script>
</dom-module>
Polymer Boilerplate

my-element.html:
<link rel="import"
<template>
<style>
</style>
</template>
<script>
}
MyElement);
</script>
</dom-module>
index.html:
<!doctype html>
<html>
<head>
<title>Shadow DOM Demo</title>
<script
src="bower_components/webcomponentsjs/webcomponent
s-loader.js"></script>
<link rel="import" href="my-element.html">
<style>
/* Main Document Styles */
</style>
</head>
<body>
<my-element></my-element>
<p>Paragraph in the main document</p>
</body>
</html>

my-element.html:
<link rel="import"
<template>
<style>
</style>
</template>
<script>
}
MyElement);
</script>
</dom-module>
index.html:
<!doctype html>
<html>
<head>
<script
<style>
</style>
</head>
<body>
</body>
</html>
Load Polyfills (if needed)

my-element.html:
<link rel="import"
<template>
<style>
</style>
<p>Shadow DOM is awesome/p>
</template>
<script>
}
MyElement);
</script>
</dom-module>
index.html:
<!doctype html>
<html>
<head>
<script
<style>
</style>
</head>
<body>
</body>
</html>
Import my-element.html

my-element.html:
<link rel="import"
<template>
<style>
</style>
</template>
<script>
}
MyElement);
</script>
</dom-module>
index.html:
<!doctype html>
<html>
<head>
<script
<style>
</style>
</head>
<body>
</body>
</html>
Styles we’ll be modifying

index.html:
<!doctype html>
<html>
<head>
<script
<style>
</style>
</head>
<body>
</body>
</html>
my-element.html:
<link rel="import"
<template>
<style>
</style>
</template>
<script>
}
MyElement);
</script>
</dom-module>
Body contains <my-element> & <p>

my-element.html:
<link rel="import"
<template>
<style>
</style>
</template>
<script>
}
MyElement);
</script>
</dom-module>
index.html:
<!doctype html>
<html>
<head>
<script
<style>
</style>
</head>
<body>
</body>
</html>
Flattened DOM Tree:
<body>
<my-element>
#shadow-root (open)
<style>...</style>
</my-element>
</body>

my-element.html:
<style>
p {
border: 3px solid #f60;
}
</style>

my-element.html:
<style>
p {
}
</style>
index.html:
<style>
p {
background-color: #9cf;
}
</style>

Rendered Result:
Shadow DOM is awesome
Paragraph in the main document
my-element.html:
<style>
p {
}
</style>
index.html:
<style>
p {
background-color: #9cf;
}
</style>

Rendered Result:
my-element.html:
<style>
:host {
}
p {
}
</style>
:host selector

Rendered Result:
my-element.html:
<style>
:host {
}
p {
}
</style>
Flattened DOM Tree:
<body>
<my-element>
#shadow-root (open)
<style>...</style>
</my-element>
</body>

Rendered Result:
my-element.html:
<style>
:host {
outline: 3px dashed blue;
}
p {
}
</style>

Rendered Result:
my-element.html:
<style>
:host {
display: block;
}
p {
}
</style>

Rendered Result:
my-element.html:
<style>
:host {
display: block;
contain: content;
}
p {
}
</style>
See https://developers.google.com/web/updates/2016/06/css-containment for more information on contain

Rendered Result:
my-element.html:
<style>
:host {
display: block;
contain: content;
}
p {
margin: 0;
}
</style>
See https://developers.google.com/web/updates/2016/06/css-containment for more information on contain

Rendered Result:
my-element.html:
<style>
:host {
display: block;
contain: content;
}
:host([disabled]) {
outline-color: #ccc;
}
:host([disabled]) > p {
border-color: #ccc;
} ...
</style>

Rendered Result:
my-element.html:
<style>
:host {
display: block;
contain: content;
}
:host([disabled]) {
}
border-color: #ccc;
} ...
</style>
index.html:
<p>Paragraph in the main
document</p>

Rendered Result:
my-element.html:
<style>
:host {
display: block;
contain: content;
}
:host([disabled]) {
}
border-color: #ccc;
} ...
</style>
index.html:
<my-element disabled></my-element>
document</p>

Rendered Result:
my-element.html:
<style>
:host {
display: block;
contain: content;
}
p {
margin: 0;
}
</style>
index.html:
document</p>

Rendered Result:
my-element.html:
<style>
:host {
display: block;
contain: content;
}
p {
margin: 0;
}
</style>
index.html:
<style>
p { background-color: #9cf; }
</style>

Rendered Result:
index.html:
<style>
my-element { outline-color: red; }
</style>
my-element.html:
<style>
:host {
display: block;
contain: content;
}
p {
margin: 0;
}
</style>

Rendered Result:
index.html:
<style>
my-element { outline-color: red; }
my-element p {
border-color: blue;
}
</style>
my-element.html:
<style>
:host {
display: block;
contain: content;
}
p {
margin: 0;
}
</style>

Rendered Result:
my-element.html:
<style>
:host {
display: block;
contain: content;
}
p {
margin: 0;
}
</style>
index.html:
<my-element>
<ul>
</ul>
</my-element>
document</p>

Rendered Result:
my-element.html:
<style>
:host {
display: block;
contain: content;
}
p {
margin: 0;
}
</style>
index.html:
<my-element>
<ul>
<li>This is Light DOM</li>
<li>It needs a slot</li>
</ul>
</my-element>

my-element.html:
<template>
<style> ... </style>
</template>
Rendered Result:
index.html:
<my-element>
<ul>
</ul>
</my-element>

my-element.html:
<template>
<slot></slot>
</template>
Rendered Result:
• This is Light DOM
• It needs a slot

my-element.html:
<template>
<slot></slot>
</template>
Rendered Result:
• It needs a slot
Flattened DOM Tree:
<body>
<my-element>
#shadow-root (open)
<style>...</style>
<slot>
<ul>
</ul>
</slot>
</my-element> ...

my-element.html:
<template>
<style>
...
::slotted(ul) {
}
</style>
<slot></slot>
</template>
Rendered Result:
• It needs a slot
::slotted() selector

my-element.html:
<template>
<style>
...
::slotted(ul) {
margin: 0;
}
</style>
<slot></slot>
</template>
Rendered Result:
• It needs a slot

my-element.html:
<template>
<style>
...
::slotted(ul) {
margin: 0;
}
::slotted(ul > li) {
color: red;
}
</style>
<slot></slot>
</template>
Rendered Result:
• It needs a slot

my-element.html:
<template>
<style>
...
::slotted(ul) {
margin: 0;
}
</style>
<slot></slot>
</template>
Rendered Result:
• It needs a slot
index.html:
<style>
</style>

my-element.html:
<template>
<style>
...
::slotted(ul) {
margin: 0;
}
</style>
<slot></slot>
</template>
Rendered Result:
• It needs a slot
index.html:
<style>
li { color: red; }
</style>

my-element.html:
<template>
<style>
...
::slotted(ul) {
margin: 0;
}
</style>
<slot></slot>
</template>
Rendered Result:
• It needs a slot
index.html:
<style>
ul { color: red; }
</style>

my-element.html:
<template>
<style>
...
::slotted(ul) {
margin: 0;
color: blue;
}
</style>
<slot></slot>
</template>
Rendered Result:
• It needs a slot
index.html:
<style>
ul { color: red; }
</style>

my-element.html:
<template>
<style>
...
::slotted(ul) {
margin: 0;
color: blue;
}
</style>
<slot></slot>
</template>
Rendered Result:
• It needs a slot
index.html:
<style>
</style>

my-element.html:
<template>
<style>
:host {
display: block;
contain: content;
}
p {
margin: 0;
}
::slotted(ul) { ...
Rendered Result:
• It needs a slot
index.html:
<style>
</style>

my-element.html:
<template>
<style>
:host {
display: block;
contain: content;
}
p {
margin: 0;
}
::slotted(ul) { ...
Rendered Result:
• It needs a slot
index.html:
<style>
body { color: green;
font-family: Calibri; }

my-element.html:
<template>
<style>
:host {
display: block;
contain: content;
color: initial;
}
p {
margin: 0;
}
::slotted(ul) { ...
Rendered Result:
• It needs a slot
index.html:
<style>

my-element.html:
<template>
<style>
:host {
display: block;
contain: content;
all: initial;
}
p {
margin: 0;
}
::slotted(ul) { ...
Rendered Result:
• It needs a slot
index.html:
<style>

CSS
Custom Properties"Chameleon" by George is licensed under CC0 1.0

CSS Custom Properties
Basic usage:
<style>
html {
/* Define a Custom Property */
--body-text-color: gray;
}
p {
/* Use a Custom Property */
color: var(--body-text-color);
}
</style>

Basic usage:
<style>
html {
}
p {
/* Use a Custom Property with a fallback value */
color: var(--body-text-color, navy);
}
</style>

Basic usage:
<style>
html {
}
p {
/* Use a Custom Property with multiple fallback values */
color: var(--body-text-color, var(--p-text-color, navy));
}
</style>

my-element.html:
<style>
:host {
display: block;
contain: content;
}
p {
margin: 0;
}
::slotted(ul) {
margin: 0; ...
Rendered Result:
• It needs a slot
index.html:
<style>
</style>

my-element.html:
<style>
:host {
display: block;
contain: content;
}
p {
border: 3px solid
var(--my-element-border-color,
#f60);
margin: 0;
}
::slotted(ul) {
Rendered Result:
• It needs a slot
index.html:
<style>
</style>

my-element.html:
<style>
:host {
display: block;
contain: content;
}
p {
border: 3px solid
#f60);
margin: 0;
}
::slotted(ul) {
Rendered Result:
• It needs a slot
index.html:
<style>
html { --my-element-border-color:
purple; }

• Name colors: --xc-blue-sky: #0272B6;
• Set variables for usage: --xc-link-color: var(--xc-blue-sky);
• Useful to name Custom Property hooks in the format of
--element-property: var(--my-element-border-color, #f60);
• Besides colors, gaps and/or padding factors are useful:
--xc-main-gap: 16px; --xc-large-gap: 24px;
padding: var(--xc-main-gap); padding: calc(1.5*var(--xc-main-gap));
CSS Custom Properties Tips

CSS Mixins"Mix Colorful Color" is licensed under CC0 1.0

my-element.html:
<link rel="import"
href="bower_components/polymer/
polymer.html">
...
<style> ...
p {
border: 3px solid
#f60);
margin: 0;
@apply --my-element-p;
} ...
Rendered Result:
• It needs a slot

my-element.html:
<link rel="import"
polymer.html">
...
<style> ...
p {
border: 3px solid
#f60);
margin: 0;
} ...
Rendered Result:
• It needs a slot
Import polymer.html or add
shadycss/apply-shim.html

my-element.html:
<link rel="import"
polymer.html">
...
<style> ...
p {
border: 3px solid
#f60);
margin: 0;
} ...
Rendered Result:
• It needs a slot
Use `@apply` to add the mixin hook

my-element.html:
<link rel="import"
polymer.html">
...
<style> ...
p {
border: 3px solid
#f60);
margin: 0;
} ...
Rendered Result:
• It needs a slot
Polymer CSS Mixin Format:
<custom-style>
<style>
selector {
--mixin-name: {
/* rules */
};
}
</style>

my-element.html:
<link rel="import"
polymer.html">
...
<style> ...
p {
border: 3px solid
#f60);
margin: 0;
} ...
Rendered Result:
• It needs a slot
<custom-style>
<style>
selector {
--mixin-name: {
}
}
</style>

my-element.html:
<link rel="import"
polymer.html">
...
<style> ...
p {
border: 3px solid
#f60);
margin: 0;
} ...
Rendered Result:
• It needs a slot
<custom-style>
<style>
selector {
--mixin-name: {
/* rules */
};
}
</style>
</custom-style>

my-element.html:
<link rel="import"
polymer.html">
...
<style> ...
p {
border: 3px solid
#f60);
margin: 0;
} ...
Rendered Result:
• It needs a slot
index.html:
<style>
html {
--my-element-border-color: purple; }
}
...
</style>

my-element.html:
<link rel="import"
polymer.html">
...
<style> ...
p {
border: 3px solid
#f60);
margin: 0;
} ...
Rendered Result:
• It needs a slot
index.html:
<style>
html {
--my-element-p {
background: red;
font-style: italic;
}; ...
} ... </style>

my-element.html:
<link rel="import"
polymer.html">
...
<style> ...
p {
border: 3px solid
#f60);
margin: 0;
} ...
Rendered Result:
• It needs a slot
index.html:
<custom-style> <style>
html {
--my-element-p: {
background: red;
font-style: italic;
}; ...
} ... </style> </custom-style>

my-element.html:
<link rel="import"
polymer.html">
...
<style> ...
p {
border: 3px solid
#f60);
margin: 0;
} ...
Rendered Result:
• It needs a slot
index.html:
html {
--my-element-p: {
background: red;
font-style: italic;
}; ...
Style in my-element.html after shim is applied:
<style>
p {
border: 3px solid var(--my-element-border-color, #f60);
margin: 0;
background: var(--my-element-p_-_background);
font-style: var(--my-element-p_-_font-style);
}
</style>

my-element.html:
<link rel="import"
polymer.html">
...
<style> ...
p {
border: 3px solid
#f60);
margin: 0;
} ...
Rendered Result:
• It needs a slot
index.html:
html {
--my-element-p: {
background: red;
font-style: italic;
}; ...
Style in my-element.html after shim is applied:
<style>
p {
border: 3px solid var(--my-element-border-color, #f60);
margin: 0;
background: var(--my-element-p_-_background);
font-style: var(--my-element-p_-_font-style);
}
</style>
Style in index.html after shim is applied:
html {
--my-element-border-color: purple;
--my-element-p_-_background: red;
--my-element-p_-_font-style: italic;
}
</style> </custom-style>

• Used for setting styles in the main document, either:
- Declared directly in the main document, or
- Hoisted to the main document from an import
• When would you want to include them in an import?
- @font-face rules
- Theming (declaring common variables & mixins)
• <custom-style> & @apply can be loaded on their own via
ShadyCSS (see https://github.com/webcomponents/shadycss)
More <custom-style> notes

• This warning is unavoidable when using <custom-style>:
• If you’re using at least Polymer 1.10.1 or 2.1.1, you’re good
More <custom-style> notes

• Style Modules are Polymer’s way of sharing styles among
Polymer Components
• The styles are actually copied into the Shadow Root of the
component they are included in
- So only include what you actually need
• Great way of sharing form element styles like buttons
Another way to share styles: Style Modules

my-button-styles.html:
<link rel="import"
<dom-module id="my-button-styles">
<template>
<style>
button {
background: #fff;
border: 3px solid rebeccapurple;
color: rebeccapurple;
text-decoration: none;
}
button:hover {
background: rebeccapurple; color: #fff;
}
button:focus {
color: navy; background: powderblue;
}
</style>
</template>
</dom-module>

ShadyCSS Shim Limitations
• ::slotted needs a selector before it (such as :host)
• External stylesheets within a shadow root cannot be shimmed
- So no <link rel="stylesheet"> or @import
• Avoid dynamic changes, including:
- Changing a custom property value
- Adding styles after the scoping shim is executed
153
Additional Details: https://github.com/webcomponents/shadycss#limitations

"scroll-1410168" is licensed under CC0 1.0

Documenting Your Polymer Code
• Document with JSDoc syntax - usejsdoc.org
• Create a page that imports & includes iron-component-page
• Generate the docs and load your page:
$ npm i -g polymer-cli bower
$ polymer analyze > analysis.json
$ polymer serve --open
155
Additional Details: https://github.com/PolymerElements/iron-component-page

<!--
Material design:
[Tabs](https://www.google.com/design/s
pec/components/tabs.html)
`paper-tabs` makes it easy to explore
and switch between different views or
functional aspects of
an app, or to browse categorized data
sets.
Use `selected` property to get or set
the selected tab.
Example:
<paper-tabs selected="0">
<paper-tab>TAB 1</paper-tab>
</paper-tabs>

<!--
### Styling
The following custom properties and
mixins are available for styling:
Custom property | Description |
Default
----------------|-------------|-------
---
`--paper-tabs-selection-bar-color` |
Color for the selection bar | `--
paper-yellow-a100`
`--paper-tabs-selection-bar` | Mixin
applied to the selection bar | `{}`
`--paper-tabs` | Mixin applied to the
tabs | `{}`
`--paper-tabs-content` | Mixin applied
to the content container of tabs |
`{}`
`--paper-tabs-container` | Mixin
applied to the layout container of

/**
* If true, the tabs are aligned
to bottom (the selection bar
appears at the top).
*/
alignBottom: {
type: Boolean,
value: false
},
/**
* If true, tabs are
automatically selected when
focused using the
* keyboard.
*/
autoselect: {
type: Boolean,
value: false
},

Source: https://github.com/webcomponents/gold-standard/wiki

MONO
REPO
MANY
REPOS
MONO
REPO
MANY
REPOS
vs.
"Peñón de Ifach - Calpe - Spain" by Wyemji is licensed under CC BY-SA 3.0 "Mohegan Bluffs" by John Riviello is licensed under CC BY-SA 2.0

How do teams use my
Polymer-Powered
Design System?

{
"name": "my-app",
"flat": true,
...
http://yarnpkg.com
Why Yarn & not NPM? See https://github.com/package-community/discussions/issues/2

Using Web Components
• Import the component
- <link rel="import" href="https://your-web-component-
cdn.com/iron-pages/iron-pages.html">
• Use your custom element as a normal HTML tag
- <iron-pages>
<div>Page 1 content</div>
<div>Page 2 content</div>
</iron-pages>

Polymer-Powered Design Systems
• Have a team of designers & developers
responsible for your design system
• Polymer & Web Components are a great way to
build reusable components that work across
multiple frameworks
• Don’t forget your colons & semicolons when
defining Polymer CSS Mixins
• Embrace Demo Driven Development

Useful Links
• WebComponents.org - webcomponents.org
• Polymer Website - polymer-project.org
• Polymer Slack - polymer-slack.herokuapp.com
• Polymer 2.x Cheat Sheet - https://meowni.ca/posts/polymer-2-cheatsheet/
• How to use Polymer with Webpack - http://robdodson.me/how-to-use-polymer-with-webpack/
• PWAs with Polymer: a checklist - https://meowni.ca/posts/polymer-pwa-checklist/
• Custom Elements Everywhere - https://custom-elements-everywhere.com/
• Polycasts on YouTube -
https://www.youtube.com/playlist?list=PLOU2XLYxmsII5c3Mgw6fNYCzaWrsM3sMN
• 2017 Polymer Summit videos on YouTube -
https://www.youtube.com/playlist?list=PLNYkxOF6rcIDP0PqVaJxqNWwIgvoEPzJi
• End-to-End Polymer Apps - 2017 Chrome Dev Summit video - https://youtu.be/Wu2GCRkDecI
• 2017 Google I/O Polymer videos on YouTube -
https://www.youtube.com/playlist?list=PL_c6rbXV248du6m1VJABo32mP7sXWVb4m

Thank you!
John Riviello
@JohnRiv
Chris Lorenzo
@Chiefcll

Ensuring Design Standards with Web Components

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Ähnlich wie Ensuring Design Standards with Web Components

Ähnlich wie Ensuring Design Standards with Web Components (20)

Mehr von John Riviello

Mehr von John Riviello (6)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Ensuring Design Standards with Web Components