Home Start Get started Build an element 1. Get set up 2. Add local DOM 3. Data binding & properties 4. React to input 5. Theming with custom properties Build an app 1. Get set up 2. Create a new page 3. Add some elements 4. Deploy Polymer Feature overview Quick tour Define elements Register an element Declare properties Instance methods Behaviors Local DOM & styling Local DOM Styling Events Handle and fire events Gesture events Data system Data system concepts Work with object and array data Observers and computed properties Data binding Helper elements Tools Tools overview Polymer CLI Document your elements Test your elements Optimize for production Publish an element Advanced tools Services What's new Release notes 1.0 Migration guide About Polymer 1.0 Resources Community Browser compatibility API Reference Polymer.Base array-selector custom-style dom-bind dom-if dom-repeat dom-template Polymer.Templatizer Global settings App Toolbox What's in the box? Using the Toolbox App templates Responsive app layout Routing Localization App storage Service worker Serve your app Case study Shop News Blog Community Home Start Get started Quick tour of Polymer Install the Release Candidate Polymer Feature overview What's new About Polymer 2.0 Upgrade guide Hybrid elements Release notes Custom elements Custom element concepts Define an element Declare properties Shadow DOM & styling Shadow DOM concepts DOM templating Style shadow DOM Custom CSS properties Events Handle and fire events Gesture events Data system Data system concepts Work with object and array data Observers and computed properties Data binding Helper elements Tools Tools overview Polymer CLI Document your elements Test your elements Optimize for production Advanced tools Services polymer.json specification Node support Resources Browser compatibility Glossary API Reference API Reference App Toolbox What's in the box? Using the Toolbox App templates Responsive app layout Routing Localization App storage Service worker Serve your app Case study Shop News Blog Community

As you may have heard, the /deep/ and ::shadow combinators are being deprecated, in favor of using CSS custom properties to more carefully inherit styles across shadow boundaries.

This is important, since it changes the way your app and Polymer elements are using the styles in paper-styles and iron-flex-layout. Both of these elements offer "mixin" and "classes" versions of all the styles: the classes version, in particular, uses the /deep/ combinator for each of its styles, making these styles available throughout your application and within all element shadow roots. The mixin version defines custom property mixins, which can be selectively applied inside elements where needed.

To help transition away from using /deep/ and ::shadow, we’re slowly updating all our elements and their demos, and replacing the “classes” versions of all these styles with the mixin equivalents. This means that, prior to this update, if an element was using the “classes” version of iron-flex-layout, you would have been able to magically use any of the flex layout classes in any of your other elements, because /deep/ made them accessible everywhere. This no longer will be the case, so after updating you might see layout issues in your application, if this was something you were accidentally relying on.

For example, the paper-toolbar element used to transitively import the class-based iron-flex-layout that used /deep/ to pierce shadow roots. This means you could have accidentally done something like:

<link rel=”import” href=”paper-toolbar/paper-toolbar.html”>

<dom-module id=”my-element”>
  <template>
    <paper-toolbar>
      <div>My App</div>
    </paper-toolbar>

    <div class=”layout horizontal”><!-- this would apply the layout classes from iron-flex-layout even though I didn’t explicitly import them -->
      …
    </div>
  <template>
</dom-module>

Our recommendation for now is to start using the mixin versions in your app as well. If after the update you’re noticing that some flex styles are no longer being applied correctly, it’s probably the case that your element needs to import ‘iron-flex-layout/iron-flex-layout.html`, and apply the correct flex mixin:

<link rel=”import” href=”paper-toolbar/paper-toolbar.html”>
<link rel=”import” href=”iron-flex-layout/iron-flex-layout.html”>

<dom-module id=”my-element”>
  <template>
    <style>
       .content {
         @apply(--layout-horizontal)
        }
     </style>

    <paper-toolbar>
      <div>My App</div>
    </paper-toolbar>

    <div class=”content”>
      …
    </div>
  <template>
</dom-module>

Of course, you can also apply the custom layout properties defined in iron-flex-layout to your main document, using a <style is="custom-style"> element:

<html>
<head>
<link rel="import" href="iron-flex-layout/iron-flex-layout.html">

<style is="custom-style">
  .flex-horizontal {
    @apply(--layout-horizontal);
  }
  .flexchild {
    @apply(--layout-flex);
  }
</style>

</head>

<div class="flex-horizontal">
  <div>one</div>
  <div class="flexchild">two (flex)</div>
  <div>three</div>
</div>
</html>