How i style when same elements in one place?

Question

I have a trouble with styling my components. When i built my structure like this:

<dom-module id="content-area">
   <template>
      <my-button class='red'>Hello</my-button>
      <my-button class='green'>Hello</my-button>
   </template>
</dom-module>

And how i style it with external html file custom-style.html

<custom-style>
   <style is="custom-style">
       :host(.red) {
          color: red;
       }
       :host(.green) {
          color: green;
       }
   </style>
</custom-style>

What did i do wrong ? Any advice ?

Answer 1

In order to use a custom-style, which you may share with your all components: As @Alberto Marin explained, include the style file

<link rel="import" href="custom-style.html">
<dom-module id="content-area">
  <template>
    <style include="custom-stle">
    </style>
     <my-button class='red'>Hello</my-button>
     <my-button class='green'>Hello</my-button>
  </template>
</dom-module>

And at custom-style.html wrap your style block in and elements, like this:

<dom-module id="custom-style">
  <template>
    <style>
      <!-- Your shared styles -->
    </style>
  </template>
</dom-module>