Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

of

Polymer-Powered Design Systems - DevFest Florida Slide 1 Polymer-Powered Design Systems - DevFest Florida Slide 2 Polymer-Powered Design Systems - DevFest Florida Slide 3 Polymer-Powered Design Systems - DevFest Florida Slide 4 Polymer-Powered Design Systems - DevFest Florida Slide 5 Polymer-Powered Design Systems - DevFest Florida Slide 6 Polymer-Powered Design Systems - DevFest Florida Slide 7 Polymer-Powered Design Systems - DevFest Florida Slide 8 Polymer-Powered Design Systems - DevFest Florida Slide 9 Polymer-Powered Design Systems - DevFest Florida Slide 10 Polymer-Powered Design Systems - DevFest Florida Slide 11 Polymer-Powered Design Systems - DevFest Florida Slide 12 Polymer-Powered Design Systems - DevFest Florida Slide 13 Polymer-Powered Design Systems - DevFest Florida Slide 14 Polymer-Powered Design Systems - DevFest Florida Slide 15 Polymer-Powered Design Systems - DevFest Florida Slide 16 Polymer-Powered Design Systems - DevFest Florida Slide 17 Polymer-Powered Design Systems - DevFest Florida Slide 18 Polymer-Powered Design Systems - DevFest Florida Slide 19 Polymer-Powered Design Systems - DevFest Florida Slide 20 Polymer-Powered Design Systems - DevFest Florida Slide 21 Polymer-Powered Design Systems - DevFest Florida Slide 22 Polymer-Powered Design Systems - DevFest Florida Slide 23 Polymer-Powered Design Systems - DevFest Florida Slide 24 Polymer-Powered Design Systems - DevFest Florida Slide 25 Polymer-Powered Design Systems - DevFest Florida Slide 26 Polymer-Powered Design Systems - DevFest Florida Slide 27 Polymer-Powered Design Systems - DevFest Florida Slide 28 Polymer-Powered Design Systems - DevFest Florida Slide 29 Polymer-Powered Design Systems - DevFest Florida Slide 30 Polymer-Powered Design Systems - DevFest Florida Slide 31 Polymer-Powered Design Systems - DevFest Florida Slide 32 Polymer-Powered Design Systems - DevFest Florida Slide 33 Polymer-Powered Design Systems - DevFest Florida Slide 34 Polymer-Powered Design Systems - DevFest Florida Slide 35 Polymer-Powered Design Systems - DevFest Florida Slide 36 Polymer-Powered Design Systems - DevFest Florida Slide 37 Polymer-Powered Design Systems - DevFest Florida Slide 38 Polymer-Powered Design Systems - DevFest Florida Slide 39 Polymer-Powered Design Systems - DevFest Florida Slide 40 Polymer-Powered Design Systems - DevFest Florida Slide 41 Polymer-Powered Design Systems - DevFest Florida Slide 42 Polymer-Powered Design Systems - DevFest Florida Slide 43 Polymer-Powered Design Systems - DevFest Florida Slide 44 Polymer-Powered Design Systems - DevFest Florida Slide 45 Polymer-Powered Design Systems - DevFest Florida Slide 46 Polymer-Powered Design Systems - DevFest Florida Slide 47 Polymer-Powered Design Systems - DevFest Florida Slide 48 Polymer-Powered Design Systems - DevFest Florida Slide 49 Polymer-Powered Design Systems - DevFest Florida Slide 50 Polymer-Powered Design Systems - DevFest Florida Slide 51 Polymer-Powered Design Systems - DevFest Florida Slide 52 Polymer-Powered Design Systems - DevFest Florida Slide 53 Polymer-Powered Design Systems - DevFest Florida Slide 54 Polymer-Powered Design Systems - DevFest Florida Slide 55 Polymer-Powered Design Systems - DevFest Florida Slide 56 Polymer-Powered Design Systems - DevFest Florida Slide 57 Polymer-Powered Design Systems - DevFest Florida Slide 58 Polymer-Powered Design Systems - DevFest Florida Slide 59 Polymer-Powered Design Systems - DevFest Florida Slide 60 Polymer-Powered Design Systems - DevFest Florida Slide 61 Polymer-Powered Design Systems - DevFest Florida Slide 62 Polymer-Powered Design Systems - DevFest Florida Slide 63 Polymer-Powered Design Systems - DevFest Florida Slide 64 Polymer-Powered Design Systems - DevFest Florida Slide 65 Polymer-Powered Design Systems - DevFest Florida Slide 66 Polymer-Powered Design Systems - DevFest Florida Slide 67 Polymer-Powered Design Systems - DevFest Florida Slide 68 Polymer-Powered Design Systems - DevFest Florida Slide 69 Polymer-Powered Design Systems - DevFest Florida Slide 70 Polymer-Powered Design Systems - DevFest Florida Slide 71 Polymer-Powered Design Systems - DevFest Florida Slide 72 Polymer-Powered Design Systems - DevFest Florida Slide 73 Polymer-Powered Design Systems - DevFest Florida Slide 74 Polymer-Powered Design Systems - DevFest Florida Slide 75 Polymer-Powered Design Systems - DevFest Florida Slide 76 Polymer-Powered Design Systems - DevFest Florida Slide 77 Polymer-Powered Design Systems - DevFest Florida Slide 78 Polymer-Powered Design Systems - DevFest Florida Slide 79 Polymer-Powered Design Systems - DevFest Florida Slide 80 Polymer-Powered Design Systems - DevFest Florida Slide 81 Polymer-Powered Design Systems - DevFest Florida Slide 82 Polymer-Powered Design Systems - DevFest Florida Slide 83 Polymer-Powered Design Systems - DevFest Florida Slide 84 Polymer-Powered Design Systems - DevFest Florida Slide 85 Polymer-Powered Design Systems - DevFest Florida Slide 86 Polymer-Powered Design Systems - DevFest Florida Slide 87 Polymer-Powered Design Systems - DevFest Florida Slide 88 Polymer-Powered Design Systems - DevFest Florida Slide 89 Polymer-Powered Design Systems - DevFest Florida Slide 90 Polymer-Powered Design Systems - DevFest Florida Slide 91 Polymer-Powered Design Systems - DevFest Florida Slide 92 Polymer-Powered Design Systems - DevFest Florida Slide 93 Polymer-Powered Design Systems - DevFest Florida Slide 94 Polymer-Powered Design Systems - DevFest Florida Slide 95 Polymer-Powered Design Systems - DevFest Florida Slide 96 Polymer-Powered Design Systems - DevFest Florida Slide 97 Polymer-Powered Design Systems - DevFest Florida Slide 98 Polymer-Powered Design Systems - DevFest Florida Slide 99 Polymer-Powered Design Systems - DevFest Florida Slide 100 Polymer-Powered Design Systems - DevFest Florida Slide 101 Polymer-Powered Design Systems - DevFest Florida Slide 102 Polymer-Powered Design Systems - DevFest Florida Slide 103 Polymer-Powered Design Systems - DevFest Florida Slide 104 Polymer-Powered Design Systems - DevFest Florida Slide 105 Polymer-Powered Design Systems - DevFest Florida Slide 106 Polymer-Powered Design Systems - DevFest Florida Slide 107 Polymer-Powered Design Systems - DevFest Florida Slide 108 Polymer-Powered Design Systems - DevFest Florida Slide 109 Polymer-Powered Design Systems - DevFest Florida Slide 110 Polymer-Powered Design Systems - DevFest Florida Slide 111 Polymer-Powered Design Systems - DevFest Florida Slide 112 Polymer-Powered Design Systems - DevFest Florida Slide 113 Polymer-Powered Design Systems - DevFest Florida Slide 114 Polymer-Powered Design Systems - DevFest Florida Slide 115 Polymer-Powered Design Systems - DevFest Florida Slide 116 Polymer-Powered Design Systems - DevFest Florida Slide 117 Polymer-Powered Design Systems - DevFest Florida Slide 118 Polymer-Powered Design Systems - DevFest Florida Slide 119 Polymer-Powered Design Systems - DevFest Florida Slide 120 Polymer-Powered Design Systems - DevFest Florida Slide 121 Polymer-Powered Design Systems - DevFest Florida Slide 122 Polymer-Powered Design Systems - DevFest Florida Slide 123 Polymer-Powered Design Systems - DevFest Florida Slide 124 Polymer-Powered Design Systems - DevFest Florida Slide 125 Polymer-Powered Design Systems - DevFest Florida Slide 126 Polymer-Powered Design Systems - DevFest Florida Slide 127 Polymer-Powered Design Systems - DevFest Florida Slide 128 Polymer-Powered Design Systems - DevFest Florida Slide 129 Polymer-Powered Design Systems - DevFest Florida Slide 130 Polymer-Powered Design Systems - DevFest Florida Slide 131 Polymer-Powered Design Systems - DevFest Florida Slide 132 Polymer-Powered Design Systems - DevFest Florida Slide 133 Polymer-Powered Design Systems - DevFest Florida Slide 134 Polymer-Powered Design Systems - DevFest Florida Slide 135 Polymer-Powered Design Systems - DevFest Florida Slide 136 Polymer-Powered Design Systems - DevFest Florida Slide 137 Polymer-Powered Design Systems - DevFest Florida Slide 138 Polymer-Powered Design Systems - DevFest Florida Slide 139 Polymer-Powered Design Systems - DevFest Florida Slide 140 Polymer-Powered Design Systems - DevFest Florida Slide 141 Polymer-Powered Design Systems - DevFest Florida Slide 142 Polymer-Powered Design Systems - DevFest Florida Slide 143 Polymer-Powered Design Systems - DevFest Florida Slide 144 Polymer-Powered Design Systems - DevFest Florida Slide 145 Polymer-Powered Design Systems - DevFest Florida Slide 146 Polymer-Powered Design Systems - DevFest Florida Slide 147 Polymer-Powered Design Systems - DevFest Florida Slide 148 Polymer-Powered Design Systems - DevFest Florida Slide 149 Polymer-Powered Design Systems - DevFest Florida Slide 150 Polymer-Powered Design Systems - DevFest Florida Slide 151 Polymer-Powered Design Systems - DevFest Florida Slide 152 Polymer-Powered Design Systems - DevFest Florida Slide 153 Polymer-Powered Design Systems - DevFest Florida Slide 154 Polymer-Powered Design Systems - DevFest Florida Slide 155 Polymer-Powered Design Systems - DevFest Florida Slide 156 Polymer-Powered Design Systems - DevFest Florida Slide 157 Polymer-Powered Design Systems - DevFest Florida Slide 158 Polymer-Powered Design Systems - DevFest Florida Slide 159 Polymer-Powered Design Systems - DevFest Florida Slide 160 Polymer-Powered Design Systems - DevFest Florida Slide 161 Polymer-Powered Design Systems - DevFest Florida Slide 162 Polymer-Powered Design Systems - DevFest Florida Slide 163 Polymer-Powered Design Systems - DevFest Florida Slide 164
Upcoming SlideShare
What to Upload to SlideShare
Next
Download to read offline and view in fullscreen.

1 Like

Share

Download to read offline

Polymer-Powered Design Systems - DevFest Florida

Download to read offline

One of the most powerful features of Web Components is using Shadow DOM & CSS Custom properties to achieve actual code sharing among your style guides & pattern libraries with your website and web application code. No more developing design systems in isolation and struggling to have design updates applied to the actual development code. The code you write in your Web Components is both the living pattern library and the code your components use! In this talk you'll learn the specifics of working with Polymer, the most popular Web Components library, to build your design system in a way that can be used across any web-enabled device. We'll cover best practices for working with CSS in Polymer to ensure design and accessibility needs are met. We'll also demonstrate the best ways to deal with the limitations of the Shadow DOM & CSS Custom Property shims to support older browsers.

From DevFest Florida 2017

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

Polymer-Powered Design Systems - DevFest Florida

  1. 1. Polymer-Powered Design Systems DevFest Florida - November 11, 2017 John Riviello @JohnRiv
  2. 2. © Comcast
  3. 3. © Comcast
  4. 4. © Comcast
  5. 5. © Comcast
  6. 6. © Comcast
  7. 7. © Comcast
  8. 8. "Notebook beside the iPhone on Table" by PicJumbo is licensed under CC0 1.0
  9. 9. WHY?!? 1. Communication 2. Deviations "Alone" by Pixabay is licensed under CC0 1.0
  10. 10. “Designers should build products that solve needs instead of spending time on reinventions” - Jack Zankowski Creative Director, Comcast XD
  11. 11. "Mask, Ancient Artifact" by Pedro_Teixeira is licensed under CC0 1.0
  12. 12. "Abstract Business Code" by Pixabay is licensed under CC0 1.0
  13. 13. “And You Thought Buttons Were Easy?” - Nathan Curtis Source: https://medium.com/eightshapes-llc/and-you-thought-buttons-were-easy-26eb5b5c1871
  14. 14. Source: https://medium.com/eightshapes-llc/and-you-thought-buttons-were-easy-26eb5b5c1871 $100/hour x 200 hours = $20,000
  15. 15. Source: https://medium.com/eightshapes-llc/and-you-thought-buttons-were-easy-26eb5b5c1871 $20,000 x 50 teams = $1,000,000
  16. 16. Source: https://medium.com/eightshapes-llc/and-you-thought-buttons-were-easy-26eb5b5c1871 $20,000 x 50 teams = $1,000,000
  17. 17. "Books on Shelf in Library" by Pixabay is licensed under CC0 1.0
  18. 18. 76 contributors 200 contributors 542 contributors
  19. 19. “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
  20. 20. 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
  21. 21. Google Polymer Project
  22. 22. #UseThePlatform - Polymer Motto
  23. 23. Existing Frameworks Applications Web Platform Web Components built with Polymer (or not)
  24. 24. What Are Web Components?
  25. 25. What Are Web Components? Polymer-Powered Design Systems - @JohnRiv35 4 Specs
  26. 26. What Are Web Components? Polymer-Powered Design Systems - @JohnRiv36 Custom Elements
  27. 27. What Are Web Components? Polymer-Powered Design Systems - @JohnRiv37 Custom Elements •Provides a way for authors to build their own fully-featured DOM elements. - <xc-tab>Your Wifi</xc-tab>
  28. 28. What Are Web Components? Polymer-Powered Design Systems - @JohnRiv38 HTML Imports
  29. 29. What Are Web Components? Polymer-Powered Design Systems - @JohnRiv39 HTML Imports • Means to import custom elements - <link rel="import" href="../xc-tab/xc-tab.html"> • Built-in deduplication • Componetize the HTML, CSS & JavaScript • Will be replaced by ES6 Modules - import "../xc-tab/xc-tab.js"
  30. 30. What Are Web Components? Polymer-Powered Design Systems - @JohnRiv40 Templates
  31. 31. What Are Web Components? Polymer-Powered Design Systems - @JohnRiv41 • 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
  32. 32. What Are Web Components? Polymer-Powered Design Systems - @JohnRiv42 Shadow DOM
  33. 33. What Are Web Components? Polymer-Powered Design Systems - @JohnRiv43 •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
  34. 34. Source: https://www.webcomponents.org/element/PolymerElements/paper-tabs
  35. 35. Source: https://ebidel.github.io/material-playground/
  36. 36. How do I build my Design System using Polymer?
  37. 37. “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
  38. 38. You Need a TeamYou Need a Team
  39. 39. “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:
  40. 40. "Person Workshop" is licensed under CC0 1.0 / Adjusted from original
  41. 41. Building Your Design System with Polymer CSS IS AWESOME Polymer-Powered Design Systems54 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
  42. 42. 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>
  43. 43. 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> Import Polymer.Element
  44. 44. 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> Styles we’ll be modifying
  45. 45. 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> Template contains <p>
  46. 46. 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> Polymer Boilerplate
  47. 47. 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> 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>
  48. 48. 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> 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> Load Polyfills (if needed)
  49. 49. 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> 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> Import my-element.html
  50. 50. 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> 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> Styles we’ll be modifying
  51. 51. 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" 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> Body contains <my-element> & <p>
  52. 52. 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> 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> Flattened DOM Tree: <body> <my-element> #shadow-root (open) <style>...</style> <p>Shadow DOM is awesome</p> </my-element> <p>Paragraph in the main document</p> </body>
  53. 53. Rendered Result: Shadow DOM is awesome Paragraph in the main document my-element.html: <style> p { border: 3px solid #f60; } </style> index.html: <style> p { background-color: #9cf; } </style>
  54. 54. Rendered Result: Shadow DOM is awesome Paragraph in the main document my-element.html: <style> :host { } p { border: 3px solid #f60; } </style> :host selector
  55. 55. Rendered Result: Shadow DOM is awesome Paragraph in the main document my-element.html: <style> :host { } p { border: 3px solid #f60; } </style> Flattened DOM Tree: <body> <my-element> #shadow-root (open) <style>...</style> <p>Shadow DOM is awesome</p> </my-element> <p>Paragraph in the main document</p> </body>
  56. 56. Rendered Result: Shadow DOM is awesome Paragraph in the main document my-element.html: <style> :host { outline: 3px dashed blue; } p { border: 3px solid #f60; } </style>
  57. 57. Rendered Result: Shadow DOM is awesome Paragraph in the main document my-element.html: <style> :host { outline: 3px dashed blue; display: block; } p { border: 3px solid #f60; } </style>
  58. 58. Rendered Result: Shadow DOM is awesome Paragraph in the main document my-element.html: <style> :host { outline: 3px dashed blue; display: block; contain: content; } p { border: 3px solid #f60; } </style> See https://developers.google.com/web/updates/2016/06/css-containment for more information on contain
  59. 59. Rendered Result: Shadow DOM is awesome Paragraph in the main document my-element.html: <style> :host { outline: 3px dashed blue; display: block; contain: content; } p { border: 3px solid #f60; margin: 0; } </style> See https://developers.google.com/web/updates/2016/06/css-containment for more information on contain
  60. 60. Rendered Result: Shadow DOM is awesome Paragraph in the main document my-element.html: <style> :host { outline: 3px dashed blue; display: block; contain: content; } :host([disabled]) { outline-color: #ccc; } :host([disabled]) > p { border-color: #ccc; } ... </style>
  61. 61. Rendered Result: Shadow DOM is awesome Paragraph in the main document my-element.html: <style> :host { outline: 3px dashed blue; display: block; contain: content; } :host([disabled]) { outline-color: #ccc; } :host([disabled]) > p { border-color: #ccc; } ... </style> index.html: <my-element></my-element> <p>Paragraph in the main document</p>
  62. 62. Rendered Result: Shadow DOM is awesome Paragraph in the main document my-element.html: <style> :host { outline: 3px dashed blue; display: block; contain: content; } :host([disabled]) { outline-color: #ccc; } :host([disabled]) > p { border-color: #ccc; } ... </style> index.html: <my-element disabled></my-element> <p>Paragraph in the main document</p>
  63. 63. Rendered Result: Shadow DOM is awesome Paragraph in the main document my-element.html: <style> :host { outline: 3px dashed blue; display: block; contain: content; } :host([disabled]) { outline-color: #ccc; } :host([disabled]) > p { border-color: #ccc; } ... </style> index.html: <my-element></my-element> <p>Paragraph in the main document</p>
  64. 64. Rendered Result: Shadow DOM is awesome Paragraph in the main document my-element.html: <style> :host { outline: 3px dashed blue; display: block; contain: content; } p { border: 3px solid #f60; margin: 0; } </style> index.html: <my-element></my-element> <p>Paragraph in the main document</p>
  65. 65. Rendered Result: Shadow DOM is awesome Paragraph in the main document my-element.html: <style> :host { outline: 3px dashed blue; display: block; contain: content; } p { border: 3px solid #f60; margin: 0; } </style> index.html: <style> p { background-color: #9cf; } </style>
  66. 66. Rendered Result: Shadow DOM is awesome Paragraph in the main document index.html: <style> p { background-color: #9cf; } my-element { outline-color: red; } </style> my-element.html: <style> :host { outline: 3px dashed blue; display: block; contain: content; } p { border: 3px solid #f60; margin: 0; } </style>
  67. 67. Rendered Result: Shadow DOM is awesome Paragraph in the main document index.html: <style> p { background-color: #9cf; } my-element { outline-color: red; } my-element p { border-color: blue; } </style> my-element.html: <style> :host { outline: 3px dashed blue; display: block; contain: content; } p { border: 3px solid #f60; margin: 0; } </style>
  68. 68. Rendered Result: Shadow DOM is awesome Paragraph in the main document my-element.html: <style> :host { outline: 3px dashed blue; display: block; contain: content; } p { border: 3px solid #f60; margin: 0; } </style> index.html: <style> p { background-color: #9cf; } </style>
  69. 69. Rendered Result: Shadow DOM is awesome Paragraph in the main document my-element.html: <style> :host { outline: 3px dashed blue; display: block; contain: content; } p { border: 3px solid #f60; margin: 0; } </style> index.html: <my-element></my-element> <p>Paragraph in the main document</p>
  70. 70. Rendered Result: Shadow DOM is awesome Paragraph in the main document my-element.html: <style> :host { outline: 3px dashed blue; display: block; contain: content; } p { border: 3px solid #f60; margin: 0; } </style> index.html: <my-element> <ul> </ul> </my-element> <p>Paragraph in the main document</p>
  71. 71. Rendered Result: Shadow DOM is awesome Paragraph in the main document my-element.html: <style> :host { outline: 3px dashed blue; display: block; contain: content; } p { border: 3px solid #f60; margin: 0; } </style> index.html: <my-element> <ul> <li>This is Light DOM</li> <li>It needs a slot</li> </ul> </my-element> <p>Paragraph in the main
  72. 72. my-element.html: <template> <style> ... </style> <p>Shadow DOM is awesome</p> </template> Rendered Result: Shadow DOM is awesome Paragraph in the main document index.html: <my-element> <ul> <li>This is Light DOM</li> <li>It needs a slot</li> </ul> </my-element> <p>Paragraph in the main
  73. 73. my-element.html: <template> <style> ... </style> <p>Shadow DOM is awesome</p> <slot></slot> </template> Rendered Result: Shadow DOM is awesome • This is Light DOM • It needs a slot Paragraph in the main document
  74. 74. my-element.html: <template> <style> ... </style> <p>Shadow DOM is awesome</p> <slot></slot> </template> Rendered Result: Shadow DOM is awesome • This is Light DOM • It needs a slot Paragraph in the main document Flattened DOM Tree: <body> <my-element> #shadow-root (open) <style>...</style> <p>Shadow DOM is awesome</p> <slot> <ul> <li>This is Light DOM</li> <li>It needs a slot</li> </ul> </slot> </my-element> ...
  75. 75. my-element.html: <template> <style> ... </style> <p>Shadow DOM is awesome</p> <slot></slot> </template> Rendered Result: Shadow DOM is awesome • This is Light DOM • It needs a slot Paragraph in the main document Flattened DOM Tree: <body> <my-element> #shadow-root (open) <style>...</style> <p>Shadow DOM is awesome</p> <slot> <ul> <li>This is Light DOM</li> <li>It needs a slot</li> </ul> </slot> </my-element> ...
  76. 76. my-element.html: <template> <style> ... </style> <p>Shadow DOM is awesome</p> <slot></slot> </template> Rendered Result: Shadow DOM is awesome • This is Light DOM • It needs a slot Paragraph in the main document
  77. 77. my-element.html: <template> <style> ... ::slotted(ul) { } </style> <p>Shadow DOM is awesome</p> <slot></slot> </template> Rendered Result: Shadow DOM is awesome • This is Light DOM • It needs a slot Paragraph in the main document ::slotted() selector
  78. 78. my-element.html: <template> <style> ... ::slotted(ul) { margin: 0; } </style> <p>Shadow DOM is awesome</p> <slot></slot> </template> Rendered Result: Shadow DOM is awesome • This is Light DOM • It needs a slot Paragraph in the main document
  79. 79. my-element.html: <template> <style> ... ::slotted(ul) { margin: 0; } ::slotted(ul > li) { color: red; } </style> <p>Shadow DOM is awesome</p> <slot></slot> </template> Rendered Result: Shadow DOM is awesome • This is Light DOM • It needs a slot Paragraph in the main document
  80. 80. my-element.html: <template> <style> ... ::slotted(ul) { margin: 0; } </style> <p>Shadow DOM is awesome</p> <slot></slot> </template> Rendered Result: Shadow DOM is awesome • This is Light DOM • It needs a slot Paragraph in the main document
  81. 81. my-element.html: <template> <style> ... ::slotted(ul) { margin: 0; } </style> <p>Shadow DOM is awesome</p> <slot></slot> </template> Rendered Result: Shadow DOM is awesome • This is Light DOM • It needs a slot Paragraph in the main document index.html: <style> p { background-color: #9cf; } </style>
  82. 82. my-element.html: <template> <style> ... ::slotted(ul) { margin: 0; } </style> <p>Shadow DOM is awesome</p> <slot></slot> </template> Rendered Result: Shadow DOM is awesome • This is Light DOM • It needs a slot Paragraph in the main document index.html: <style> p { background-color: #9cf; } li { color: red; } </style>
  83. 83. my-element.html: <template> <style> ... ::slotted(ul) { margin: 0; } </style> <p>Shadow DOM is awesome</p> <slot></slot> </template> Rendered Result: Shadow DOM is awesome • This is Light DOM • It needs a slot Paragraph in the main document index.html: <style> p { background-color: #9cf; } ul { color: red; } </style>
  84. 84. my-element.html: <template> <style> ... ::slotted(ul) { margin: 0; color: blue; } </style> <p>Shadow DOM is awesome</p> <slot></slot> </template> Rendered Result: Shadow DOM is awesome • This is Light DOM • It needs a slot Paragraph in the main document index.html: <style> p { background-color: #9cf; } ul { color: red; } </style>
  85. 85. my-element.html: <template> <style> ... ::slotted(ul) { margin: 0; color: blue; } </style> <p>Shadow DOM is awesome</p> <slot></slot> </template> Rendered Result: Shadow DOM is awesome • This is Light DOM • It needs a slot Paragraph in the main document index.html: <style> p { background-color: #9cf; } </style>
  86. 86. my-element.html: <template> <style> ... ::slotted(ul) { margin: 0; } </style> <p>Shadow DOM is awesome</p> <slot></slot> </template> Rendered Result: Shadow DOM is awesome • This is Light DOM • It needs a slot Paragraph in the main document index.html: <style> p { background-color: #9cf; } </style>
  87. 87. my-element.html: <template> <style> :host { outline: 3px dashed blue; display: block; contain: content; } p { border: 3px solid #f60; margin: 0; } ::slotted(ul) { ... Rendered Result: Shadow DOM is awesome • This is Light DOM • It needs a slot Paragraph in the main document index.html: <style> p { background-color: #9cf; } </style>
  88. 88. my-element.html: <template> <style> :host { outline: 3px dashed blue; display: block; contain: content; } p { border: 3px solid #f60; margin: 0; } ::slotted(ul) { ... Rendered Result: Shadow DOM is awesome • This is Light DOM • It needs a slot Paragraph in the main document index.html: <style> body { color: green; font-family: Calibri; } p { background-color: #9cf; }
  89. 89. my-element.html: <template> <style> :host { outline: 3px dashed blue; display: block; contain: content; color: initial; } p { border: 3px solid #f60; margin: 0; } ::slotted(ul) { ... Rendered Result: Shadow DOM is awesome • This is Light DOM • It needs a slot Paragraph in the main document index.html: <style> body { color: green; font-family: Calibri; } p { background-color: #9cf; }
  90. 90. my-element.html: <template> <style> :host { outline: 3px dashed blue; display: block; contain: content; all: initial; } p { border: 3px solid #f60; margin: 0; } ::slotted(ul) { ... Rendered Result: Shadow DOM is awesome • This is Light DOM • It needs a slot Paragraph in the main document index.html: <style> body { color: green; font-family: Calibri; } p { background-color: #9cf; }
  91. 91. CSS Custom Properties"Chameleon" by George is licensed under CC0 1.0
  92. 92. CSS Custom Properties Basic usage: <style> html { /* Define a Custom Property */ --body-text-color: gray; } Polymer-Powered Design Systems106
  93. 93. 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> Polymer-Powered Design Systems107
  94. 94. CSS Custom Properties Basic usage: <style> html { /* Define a Custom Property */ --body-text-color: gray; } p { /* Use a Custom Property with a fallback value */ color: var(--body-text-color, navy); } </style> Polymer-Powered Design Systems108
  95. 95. CSS Custom Properties Basic usage: <style> html { /* Define a Custom Property */ --body-text-color: gray; } p { /* Use a Custom Property with multiple fallback values */ color: var(--body-text-color, var(--p-text-color, navy)); } </style> Polymer-Powered Design Systems109
  96. 96. my-element.html: <style> :host { outline: 3px dashed blue; display: block; contain: content; } p { border: 3px solid #f60; margin: 0; } ::slotted(ul) { margin: 0; ... Rendered Result: Shadow DOM is awesome • This is Light DOM • It needs a slot Paragraph in the main document index.html: <style> p { background-color: #9cf; } </style>
  97. 97. my-element.html: <style> :host { outline: 3px dashed blue; display: block; contain: content; } p { border: 3px solid var(--my-element-border-color, #f60); margin: 0; } ::slotted(ul) { Rendered Result: Shadow DOM is awesome • This is Light DOM • It needs a slot Paragraph in the main document index.html: <style> p { background-color: #9cf; } </style>
  98. 98. my-element.html: <style> :host { outline: 3px dashed blue; display: block; contain: content; } p { border: 3px solid var(--my-element-border-color, #f60); margin: 0; } ::slotted(ul) { Rendered Result: Shadow DOM is awesome • This is Light DOM • It needs a slot Paragraph in the main document index.html: <style> html { --my-element-border-color: purple; } p { background-color: #9cf; }
  99. 99. • 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 Polymer-Powered Design Systems113
  100. 100. CSS Mixins"Mix Colorful Color" is licensed under CC0 1.0
  101. 101. my-element.html: <link rel="import" href="bower_components/polymer/ polymer.html"> ... <style> ... p { border: 3px solid var(--my-element-border-color, #f60); margin: 0; @apply --my-element-p; } ... Rendered Result: Shadow DOM is awesome • This is Light DOM • It needs a slot Paragraph in the main document
  102. 102. my-element.html: <link rel="import" href="bower_components/polymer/ polymer.html"> ... <style> ... p { border: 3px solid var(--my-element-border-color, #f60); margin: 0; @apply --my-element-p; } ... Rendered Result: Shadow DOM is awesome • This is Light DOM • It needs a slot Paragraph in the main document Import polymer.html or add shadycss/apply-shim.html
  103. 103. my-element.html: <link rel="import" href="bower_components/polymer/ polymer.html"> ... <style> ... p { border: 3px solid var(--my-element-border-color, #f60); margin: 0; @apply --my-element-p; } ... Rendered Result: Shadow DOM is awesome • This is Light DOM • It needs a slot Paragraph in the main document Use `@apply` to add the mixin hook
  104. 104. my-element.html: <link rel="import" href="bower_components/polymer/ polymer.html"> ... <style> ... p { border: 3px solid var(--my-element-border-color, #f60); margin: 0; @apply --my-element-p; } ... Rendered Result: Shadow DOM is awesome • This is Light DOM • It needs a slot Paragraph in the main document Polymer CSS Mixin Format: <custom-style> <style> selector { --mixin-name: { /* rules */ }; } </style> </custom-style>
  105. 105. my-element.html: <link rel="import" href="bower_components/polymer/ polymer.html"> ... <style> ... p { border: 3px solid var(--my-element-border-color, #f60); margin: 0; @apply --my-element-p; } ... Rendered Result: Shadow DOM is awesome • This is Light DOM • It needs a slot Paragraph in the main document
  106. 106. my-element.html: <link rel="import" href="bower_components/polymer/ polymer.html"> ... <style> ... p { border: 3px solid var(--my-element-border-color, #f60); margin: 0; @apply --my-element-p; } ... Rendered Result: Shadow DOM is awesome • This is Light DOM • It needs a slot Paragraph in the main document index.html: <style> html { --my-element-border-color: purple; } } p { background-color: #9cf; } ... </style>
  107. 107. my-element.html: <link rel="import" href="bower_components/polymer/ polymer.html"> ... <style> ... p { border: 3px solid var(--my-element-border-color, #f60); margin: 0; @apply --my-element-p; } ... Rendered Result: Shadow DOM is awesome • This is Light DOM • It needs a slot Paragraph in the main document index.html: <style> html { --my-element-p { background: red; font-style: italic; }; ... } ... </style>
  108. 108. my-element.html: <link rel="import" href="bower_components/polymer/ polymer.html"> ... <style> ... p { border: 3px solid var(--my-element-border-color, #f60); margin: 0; @apply --my-element-p; } ... Rendered Result: Shadow DOM is awesome • This is Light DOM • It needs a slot Paragraph in the main document index.html: <custom-style> <style> html { --my-element-p: { background: red; font-style: italic; }; ... } ... </style> </custom-style>
  109. 109. my-element.html: <link rel="import" href="bower_components/polymer/ polymer.html"> ... <style> ... p { border: 3px solid var(--my-element-border-color, #f60); margin: 0; @apply --my-element-p; } ... Rendered Result: Shadow DOM is awesome • This is Light DOM • It needs a slot Paragraph in the main document index.html: <custom-style> <style> html { --my-element-p: { background: red; font-style: italic; }; ... } ... </style> </custom-style> 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>
  110. 110. my-element.html: <link rel="import" href="bower_components/polymer/ polymer.html"> ... <style> ... p { border: 3px solid var(--my-element-border-color, #f60); margin: 0; @apply --my-element-p; } ... Rendered Result: Shadow DOM is awesome • This is Light DOM • It needs a slot Paragraph in the main document index.html: <custom-style> <style> html { --my-element-p: { background: red; font-style: italic; }; ... } ... </style> </custom-style> 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>
  111. 111. my-element.html: <link rel="import" href="bower_components/polymer/ polymer.html"> ... <style> ... p { border: 3px solid var(--my-element-border-color, #f60); margin: 0; @apply --my-element-p; } ... Rendered Result: Shadow DOM is awesome • This is Light DOM • It needs a slot Paragraph in the main document index.html: <custom-style> <style> html { --my-element-p: { background: red; font-style: italic; }; ... } ... </style> </custom-style> 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>
  112. 112. my-element.html: <link rel="import" href="bower_components/polymer/ polymer.html"> ... <style> ... p { border: 3px solid var(--my-element-border-color, #f60); margin: 0; @apply --my-element-p; } ... Rendered Result: Shadow DOM is awesome • This is Light DOM • It needs a slot Paragraph in the main document index.html: <custom-style> <style> html { --my-element-p: { background: red; font-style: italic; }; ... } ... </style> </custom-style> 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: <custom-style> <style> html { --my-element-border-color: purple; --my-element-p_-_background: red; --my-element-p_-_font-style: italic; } </style> </custom-style>
  113. 113. my-element.html: <link rel="import" href="bower_components/polymer/ polymer.html"> ... <style> ... p { border: 3px solid var(--my-element-border-color, #f60); margin: 0; @apply --my-element-p; } ... Rendered Result: Shadow DOM is awesome • This is Light DOM • It needs a slot Paragraph in the main document index.html: <custom-style> <style> html { --my-element-p: { background: red; font-style: italic; }; ... } ... </style> </custom-style> 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: <custom-style> <style> html { --my-element-border-color: purple; --my-element-p_-_background: red; --my-element-p_-_font-style: italic; } </style> </custom-style>
  114. 114. my-element.html: <link rel="import" href="bower_components/polymer/ polymer.html"> ... <style> ... p { border: 3px solid var(--my-element-border-color, #f60); margin: 0; @apply --my-element-p; } ... Rendered Result: Shadow DOM is awesome • This is Light DOM • It needs a slot Paragraph in the main document index.html: <custom-style> <style> html { --my-element-p: { background: red; font-style: italic; }; ... } ... </style> </custom-style> 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: <custom-style> <style> html { --my-element-border-color: purple; --my-element-p_-_background: red; --my-element-p_-_font-style: italic; } </style> </custom-style>
  115. 115. • 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 Polymer-Powered Design Systems129
  116. 116. • 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 Polymer-Powered Design Systems130
  117. 117. • 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 Polymer-Powered Design Systems131
  118. 118. my-button-styles.html: <link rel="import" href="bower_components/polymer/polymer-element.html"> <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>
  119. 119. my-button-styles.html: <link rel="import" href="bower_components/polymer/polymer-element.html"> <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> Declare styles in a dom-module with an `id` attribute
  120. 120. my-button-styles.html: <link rel="import" href="bower_components/polymer/polymer-element.html"> <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> my-element.html: <link rel="import" href="bower_components/polymer/polymer-element.html"> <link rel="import" href="my-button-styles.html"> <dom-module id="my-element"> <template> <style include="my-button-styles"> /* Element-specific CSS goes here */ </style> ... </template> <script> class MyElement extends Polymer.Element { static get is() { return 'my-element'; } } window.customElements.define(MyElement.is, MyElement); </script> </dom-module>
  121. 121. my-button-styles.html: <link rel="import" href="bower_components/polymer/polymer-element.html"> <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> my-element.html: <link rel="import" href="bower_components/polymer/polymer-element.html"> <link rel="import" href="my-button-styles.html"> <dom-module id="my-element"> <template> <style include="my-button-styles"> /* Element-specific CSS goes here */ </style> ... </template> <script> class MyElement extends Polymer.Element { static get is() { return 'my-element'; } } window.customElements.define(MyElement.is, MyElement); </script> </dom-module> Import the styles
  122. 122. my-button-styles.html: <link rel="import" href="bower_components/polymer/polymer-element.html"> <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> my-element.html: <link rel="import" href="bower_components/polymer/polymer-element.html"> <link rel="import" href="my-button-styles.html"> <dom-module id="my-element"> <template> <style include="my-button-styles"> /* Element-specific CSS goes here */ </style> ... </template> <script> class MyElement extends Polymer.Element { static get is() { return 'my-element'; } } window.customElements.define(MyElement.is, MyElement); </script> </dom-module> Include the styles
  123. 123. my-button-styles.html: <link rel="import" href="bower_components/polymer/polymer-element.html"> <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> my-element.html: <link rel="import" href="bower_components/polymer/polymer-element.html"> <link rel="import" href="my-button-styles.html"> <dom-module id="my-element"> <template> <style include="my-button-styles"> /* Element-specific CSS goes here */ </style> ... </template> <script> class MyElement extends Polymer.Element { static get is() { return 'my-element'; } } window.customElements.define(MyElement.is, MyElement); </script> </dom-module> Add additional CSS here
  124. 124. 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 Polymer-Powered Design Systems139 Additional Details: https://github.com/webcomponents/shadycss#limitations
  125. 125. "scroll-1410168" is licensed under CC0 1.0
  126. 126. 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 Polymer-Powered Design Systems141 Additional Details: https://github.com/PolymerElements/iron-component-page
  127. 127. <!-- 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-tab>TAB 2</paper-tab> <paper-tab>TAB 3</paper-tab> </paper-tabs>
  128. 128. <!-- ### 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
  129. 129. /** * 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 },
  130. 130. D D D
  131. 131. Demo Driven Development
  132. 132. © Comcast
  133. 133. Source: https://github.com/webcomponents/gold-standard/wiki
  134. 134. 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
  135. 135. How do teams use my Polymer-Powered Design System?
  136. 136. { "name": "my-app", "flat": true, ... http://yarnpkg.com Why Yarn & not NPM? See https://github.com/package-community/discussions/issues/2
  137. 137. 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 - @JohnRiv158
  138. 138. © Comcast
  139. 139. © Comcast
  140. 140. <script href="https://polaris.xfinity.com/polaris.js"></script> <xc-header tab="myaccount" is-authed="[[isAuthed]]" login-url="/login" sign-out-url="/logout" first-name="[[openidData.given_name]]" user-name="[[openidData.preferred_username]]"> </xc-header> <xc-footer></xc-footer> View the Open Source code at https://github.com/Comcast/polaris Polymer-Powered Design Systems - @JohnRiv161
  141. 141. 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 Polymer-Powered Design Systems - @JohnRiv162
  142. 142. 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/ •Hands-on with the Polymer 3.0 preview - https://www.polymer-project.org/blog/2017-08-23-hands- on-30-preview •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 Polymer-Powered Design Systems - @JohnRiv163
  143. 143. Thank you! John Riviello @JohnRiv
  • SerdarSanri

    Nov. 12, 2017

One of the most powerful features of Web Components is using Shadow DOM & CSS Custom properties to achieve actual code sharing among your style guides & pattern libraries with your website and web application code. No more developing design systems in isolation and struggling to have design updates applied to the actual development code. The code you write in your Web Components is both the living pattern library and the code your components use! In this talk you'll learn the specifics of working with Polymer, the most popular Web Components library, to build your design system in a way that can be used across any web-enabled device. We'll cover best practices for working with CSS in Polymer to ensure design and accessibility needs are met. We'll also demonstrate the best ways to deal with the limitations of the Shadow DOM & CSS Custom Property shims to support older browsers. From DevFest Florida 2017

Views

Total views

649

On Slideshare

0

From embeds

0

Number of embeds

4

Actions

Downloads

4

Shares

0

Comments

0

Likes

1

×