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 1 – Your First Element

Part 2 – Properties and Databinding

Part 3 – Reuse and Styling

Part 4 – Events and Behaviors

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