/deep/ css selector not work in chrome browser

[coitomaszkolodziej]

Hi,

Problem exist only in Chrome (ver. 43.0.2357.65 m) web browser.
I've got two polymer components. One component is inserted into other component - this is situation like in example below

<edok-component>
     <style>
           div /deep/ .test {
               color: red;
            }
     </style>
     <coi-component>
          <div class="test">SAMPLE TEXT</div>
     </coi-component>
</edok-component>

This example should apply "test" class to all html elements which used /deep/ selector. Unfortunately this not work :( Above code work only if "div /deep/ .test" move out of edok-component:

     <style>
           div /deep/ .test {
               color: red;
            }
     </style>
<edok-component>
     <coi-component>
          <div class="test">SAMPLE TEXT</div>
     </coi-component>
</edok-component>

[davidmaxwaterman]

I'm no expert, but it seems like there's no child element to a div at all, let alone one that has the test class. You're css seems to be assuming this structure :

  <div>
    <some-element class="test"></some-element>
  </div>

If this is in a polymer element, try :host /deep/ .test.
Otherwise, try coi-component /deep/ .test....or simply .test?
If you want all of them, then html /deep/ .test. Of course, you might want to specify the element type - div.test too (no space there) - I've assumed not.

[jlg7]

@coitomaszkolodziej

I may have encountered this too! I think one must use is="custom-style". This is mentioned under the migration guide:

https://www.polymer-project.org/0.9/docs/migration.html#styling

It notes that the attribute "can" be added not that it must be. I have witnessed it working recently with it and not working without it. :)

Thanks

@jongeho1

[davidmaxwaterman]

I didn't think /deep/ is used in 0.9, since it is use to penetrate shadow-dom, and >=0.8 doesn't use shadow-dom any more; though you can use it if you wish - so I guess it's only in the case where you select to use shadow-dom instead of shady-dom.

..but it does raise the question of which version of polymer is @coitomaszkolodziej using? I had assumed <0.8, so sorry if I was mistaken. Anyway, I don't know why the second example works...iinm, div .test doesn't match <div class="test>, butdiv.testdoes; so both examples shouldn't work, unless there is some other code in between (specifically adivthat is an ancestor ofdiv.test).

Am I wrong?

[kevinpschaaf]

Exactly as you have written your examples (no shadow roots, all elements are in the same scope), there is no difference in where the <style> element is placed; it has no effect on how styles are applied.

As others mentioned, at a minimum it's not clear the rule you wrote (div /deep/ .test) is what you want (it requires the element with .test to be within a <div>; it will not match <div class=".test">, since that's the same element). It seems like you want html /deep/ div.test.

If your example meant that the <style> and <coi-component> is within the shadow root of <edok-component>, then the reason having the style inside the shadow root does not apply is exactly because of what I said above: inside the shadow root, there is no <div> surrounding an element with the .test class (the <div> and .test are the same element), hence the rule does not match. It is likely that the reason the rule matches when you move the style outside is that there is a <div> somewhere up the tree surrounding <edok-component>, which allows the rule to match.

As for the confusion about whether /deep/ is "supported" in 0.9, the answer is: yes, it is supported (for now). When Shady DOM is used (instead of Shadow DOM), style rules are shimmed to approximate identical semantics with Shadow DOM styling rules, including /deep/. The only caveat is that /deep/ rules outside a polymer element <dom-module> (e.g. main document styles) must be contained in a <style is="custom-style"> to be properly shimmed when using Shady DOM. HOWEVER, note that the W3C working group has recently decided to deprecate /deep/ rules, and so cross-scope styling using this technique should be avoided going forward. Please see https://github.com/Polymer/polymer/blob/0.8-preview/PRIMER.md#custom-css-properties regarding Polymer's custom CSS property-based solution for cross-scope styling.

@coitomaszkolodziej, I am closing this based on the explanation above; please re-open if there is more to the story. Thanks.

[davidmaxwaterman]

@kevinpschaaf Nice thorough explanation. Thanks.