Is it bad practice to style element directly in polymer? - css

Question

For example I could do the next thing:
<polymer-element name="hello-world">
<template>
<div style="background-color: red">
hello world!
</div>
</template>
</polymer-element>
Furthermore, I could also style the element dynamically doing the next:
HelloWorld.create() : super.create() {
createShadowRoot().children = [
new DivElement()
..style.color = SOME_GLOBAL_COLOR
..text = 'Hello World!'
];
}
Instead of:
<polymer-element name="hello-world">
<template>
<style>
.somediv {
background-color: red;
}
</style>
<div class="somediv">
hello world!
</div>
</template>
</polymer-element>

Answer 1

It is considered good practice. It provides encapsulation.
The selectors like /deep/ can reach into the element, that makes it easy to override styles from the outside for example for theming or customization.
Styles from the outside have higher priority too, to make this easy.
Styles using the /deep/ combinator can cause performance problems especially on browsers that don't support shadowDOM natively but use the polyfills.
I would provide basic/default styling inside the component and site-specific customization outside the element.

Answer 2

The verbosity (and indirectly complexity) of the component style is the criteria to keep an eye on. I personnally find one-file components easier to maintain.
Aside this organizational consideration, as style elements are part of the template, observable (hence published) properties can be put directly inside the css. This is quite handy especially to:
provide handles to external customization.
dynamically update some css properties, like element box height.