2

Say, I am using a <core-input> inside my web component, and I want to style the <input> element inside the <core-input>. For that I would need to do

<style>
  :host::shadow input {
    background-color: green
  }
</style>

Now, the selector is okay, but I don't want to define the style properties here, because I have a CSS file made by a designer guy, that looks like this:

.input-like-things {
  background-color: green
}

On the other hand, the designer guy is not going to produce almost identical CSS files for each web component I use that has something looking like an input.

How do I correctly apply the ".input-like-things" class (or its contents) to the <input> field inside <core-input>?

I am not considering /deep/ as an option.

I created a custom component that can copy the contents of the ".input-like-things" class into the <style> tag, and that works, but only in Chrome. I could not get it to work in Firefox as long as data binding does not work inside <style> in ShadowDOM polyfill.

Help?

Paul Kapustin
  • 3,297
  • 5
  • 35
  • 45
  • Have you seen http://www.polymer-project.org/docs/elements/core-elements.html#core-style? It also allows bindings in ` – ebidel Sep 30 '14 at 22:17
  • Yes, I have seen it, I was extending it to copy the style. But I couldn't get whatever style I made dynamically work in Firefox. Could you detail how core-style can help solve the problem? In core-style, I would still need to give a specific rule name like , wouldn't I? – Paul Kapustin Sep 30 '14 at 23:09
  • You won't be able to target nodes in another element's shadow dom without rewriting selectors or modifying the element definition itself (by injecting styles or otherwise). Styles that are [inheritable](http://stackoverflow.com/questions/5612302/which-css-styles-are-inherited) may work, but the style scoping Shadow DOM provides is both a blessing and curse – ebidel Oct 01 '14 at 05:21
  • You can style the content of the shadow host. So the `` element could be declared and styled in the main DOM, then projected in the shadow DOM. http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom/#toc-projection – Paleo Oct 02 '14 at 06:26
  • possible duplicate of [Shadow DOM CSS Styling from outside is not working in Google Chrome](http://stackoverflow.com/questions/27178469/shadow-dom-css-styling-from-outside-is-not-working-in-google-chrome) – Paul Sweatte Feb 07 '15 at 08:34

0 Answers0