Welcome to Part 3 of this review of the new Pluralsight course Getting Started with Polymer.js by Bill Stavroulakis.
Bill is a Microsoft MVP, and the creator of Dotnetweekly. He started his career in Silicon Valley in 2006 developing Facebook applications with more than 6 million users. He then worked on the Ruby-on-Rails framework, implementing a back-end portal for a renowned educational institution in Greece. Nowadays, he focuses on the .NET platform and works with a start-up in the educational field called Drexnotes.
Also in this series:
Part 2 – Properties and Databinding
Part 3 – Reuse and Styling
Reuse and Styling
Local DOM
The DOM structure created by Polymer for its elements: plunk
This demo renders a component with a heading and 3 list items.
The code has an imperative script block and a declarative html block.
The script block can either be inside or outside the DOM module element.
DOM Distribution
Insertion points with the content element we we can decouple the content from the element’s code: plunk
The select attribute selector can be used to have different sections for different parts of our template.
Bill adds one of the template:
<content selected=".alert-data"></content>
He applies the alert-data CSS class to our HTML elements and removes the ready function.
These content tags are also known as insertion points.
Shady and Shadow DOM
Polymer encapsulates elements through the use of the Shady DOM. plunk
In this lesson Bill discusses some of the scope problems in CSS and HTML that we must deal with.
The Shadow DOM is a new tool to deal with this problem, and Bill demonstrates it here.
The Shadow DOM polyfill is a poor mans Shadow DOM known as the Shady DOM, which limits scope based on CSS classes.
For an in depth look at the Shadow DOM see Cory House’s Pluralsight couse HTML5 Web Component Fundamentals. Or just learn the basics in 5 minutes.
Light DOM Children
Interact with your child nodes imperatively plunk.
In this lesson we see how to load an element into both the local DOM and the light DOM.
DOM API
Methods to access and edit the DOM tree plunk
This lesson looks at Polymer’s custom API for manipulating the DOM.
Also see official DOM API examples.
Observe Node Changes
Method to observe node changes plunk
In this lesson we see how to use the appendChild, removeChild and unobserveNodes methods.
Also see observe nodes official docs.
Selectors-Combinators
Selectors and combinators for CSS styling plunk
This lessons introduces both the /deep/
combinator and the ::shadow
pseudo element
Also see styling official docs.
CSS Variables and Mix-ins
How to declare are reuse CSS properties plunk
CSS variables are a new Candidate Recommendation from the W3C.
Custom Property API
Apply custom CSS dynamically plunk
In our alert-element.html ready function we add:
this.customStyle['--primary-color'] = 'white';
this.updateStyles();
and in alert-element-wrapper.html we use getComputedStyleValue and pass “–primary-color” into it.
Shim Limitations
Polymer CSS shim limitations plunk
These limitations are:
- lack of dynamism: updated changes are not applied automatically
- lack of inheritance: custom properties can only have 1 value within an element’s local DOM scope
Custom-Style
Include styles externally plunk
Custom Style is a special attribute that we can define in a style tag in our main document.
<style is="custom-style"> :root { --primary-color:orange; } </style>
Shared Styles
Share style declarations between elements plunk
We can share styles in external stylesheets between elements.
In this lesson Bill creates external-shared-stuff.html which is a <dom-module> element
Files that want to use this style import this and also have a style include:
<style include="external-shared-stuff"></style>
Material Palette
Setting up a theme for our Polymer applications plunk
Bill introduces us to http://www.materialpalette.com/ which automatically creates a palette of 8 colors based on just two colors that we select.
We can download a polymer custom style that is created for us on this website, saving us a lot of work.