How to Style Inner Elements of Custom Polymer Element Using External Styles

How to style inner elements of custom Polymer element using external styles?

To enable styling points, use CSS variables/mixins.

Add a <style> tag to your element's template:

<dom-module id="polymer-button">
  <template>
    <style>
      .button {
        @apply --my-button-mixin;
      }
      .button.big {
        @apply --my-button-big-mixin;
      }
    </style>
    ...
  </template>
</dom-module>

Specify the mixin in a container element:

<dom-module id="x-foo">
  <template>
    <style>
      polymer-button {
        --my-button-mixin: {
          background: red;
          color: white;
        };
      }
    </style>
    <polymer-button label="Red button"></polymer-button>
  </template>
</dom-module>

...or in index.html:

<body>
  <custom-style>
    <style>
      polymer-button {
        --my-button-mixin: {
          background: red;
          color: white;
        };
      }
    </style>
  </custom-style>
  <polymer-button label="Red button"></polymer-button>
</body>

codepen (Polymer 1)

codepen (Polymer 2)

Polymer 2 styling an element's child node from an outside stylesheet

You should use CSS variables, such as:

::host {
    --progress-background: red;
    padding: 5px;
    background: rgba(0,0,0,.2);
}

div#progress {
    height: 20px;
    width: 100%;
    background: var(--progress-background);
}

And to overrride it:

my-course {
   --progress-background: green;
}

More info here: https://www.polymer-project.org/2.0/start/first-element/step-5

External Styling for CustomElements V1 & ShadowDOM

You can use the CSS @import url directive.

<template id="style-me">
    <style>
        @import url( '/css/style.css' )
    </script>
    <h1><slot></slot></h1>
</template>

The question was discussed here.

custom-style vs shared-styles in polymer

A <dom-module id="my-shared-styles"> declares a reusable style module hat you can import into elements or <style is="custom-style"> tags.

Use in a custom element

<dom-module id="my-element>
  <template>
    <style include="my-shared-styles"></style>
    ...
  </template>
</dom-module>

or in the <style> tag outside a custom element (for example in <head>)

<head>
  <style is="custom-style" include="my-shared-styles"></style>
</head>

<style is="custom-style"> is only required when you want to use Polymer CSS features (CSS variables and mixins) in a style element that is not inside a <dom-module>. Inside <dom-module> just <style> is enough.

Polymer 2, change CSS in custom element from parent

The short answer is as far as I know, you cannot change child element parameters from a parent element, at least not the way I was doing it that's for sure. This is what I found out and my solution that worked.

So I'll add some dimension to the problem so you can understand my solution and why I did it.

<other-custom-element> was a page, and the element it was on was also a page. Both were pages, so both needed the margins and such and I could not remove those. The solution is using polymer the way it was meant to be used (in my opinion): making a page of elements.

One way to do polymer, is to have a page FULL of interchangeable elements. That way if you want to use them again you can.

What this means is making <other-custom-element> look something like this:

<template>
<style include="stylesheet"></style>
<style> /*custom css*/ </style>
<div class="main">
<other-page-element1></other-page-element1>
</div>
<div class="main">
<other-page-element2></other-page-element2>
</div>
<div class="main">
<other-page-element3></other-page-element3>
</div>
</template>

instead of this:

<template>
<style include="stylesheet"></style>
<style> /*custom css*/ </style>
<div class="main">
stuff
</div>
</template>

What this allows me to do now is with the new page I can simply pull the elements (whether it be some or all) from the <other-custom-element> page like so.

<template>
<style include="stylesheet"></style>
<style> /*custom css*/ </style>
<div class="main">
<this-page-element>
</div>
<div class="main">
<other-page-element2>
</div>
</template>

This was the correct way to deal with this instead of trying to do some css selector (also that wouldn't work anyways).

Hope my answer helps anyone else who runs into css issues with polymer!

Use paper-material element within custom element

Polymer protects element internals from document styles and vice-versa. This is CSS scoping and it's a prominent feature of Web Components.

It can seem problematic in simple examples, but it's generally very beneficial to component reuse that component styles don't bash each other, and that document styles don't unintentionally foul up a component.

Polymer Starter Kit is not ideally set up for using app-theme.html in other scopes, but one thing you can do is copy the style rules you want to use into a CSS file, and then import that CSS file in your element code as below. The import and styles are used efficiently (e.g., the import is only loaded once, even if you use it in multiple elements).

<dom-module id="business-card">

  <link rel="import" type="css" href="theme-styles.css">

  <style>
    :host {
      display: block;
    }
  </style>

  <template>
    <paper-material>
      <content></content>
    </paper-material>
  </template>

  <script>
    Polymer({
      is: 'business-card'
    });
  </script>

</dom-module>

Live example: http://jsbin.com/hojajo/edit?html,output

How to Style Inner Elements of Custom Polymer Element Using External Styles