Shared Styling With Custom Html Elements?

I'm beginning to use custom elements, and one thing I can't figure out is sharing styling. For example, if I have 2 custom elements, and , both o

Solution 1:

You can use @import url to import an external stylesheet into different custom elements.

Alternately now you can also use <link rel="stylesheet"> inside a custom element Shadow DOM:

<templateid="element-1"><style>@import url( 'button-style.css' )
  </style><button>B-1</button></template><templateid="element-2"><linkrel="stylesheet"href="button-style.css"><button>B-2</button></template>

Solution 2:

If you are using css, you can just do this:

button {

  /* Put Style Here */  

}

You also have to add a link in the head on html:

<linkrel=“stylesheet”href=“theaddress”>