Data-binding to native DOM element inside of auto-binding template invokes style scoping

[adalinesimonian]

This was an interesting one. So it seems that Polymer will append the style-scoped class to a native element that is being databound when inside of an auto-binding template.

I first encountered this at http://www.plastikit.org/0.9/components/plastik-option-list/demo/ (source).

The native element in this case is <span class$="[[selectionStyle1]]">...</span>. I have two bits of CSS which target this element: p span { color: rgba(0, 0, 0, .87); } as well as .nothing { color: rgba(0, 0, 0, .54); }. (The default color for text on the page is rgba(0, 0, 0, .54).)

When I set selectionStyle1 to a value other than "nothing", the expected result is that the text will turn a richer black. But it seems not to be the case because neither of the above snippets of CSS affect the element at all.

As soon as I tack on databinding $="[[...]]" to the <span> tag, it gets style-scope added to its list of CSS classes. This causes the CSS defined in the page to no longer have any effect on the element, as the document styles are shimmed with custom-style, thus generating span:not(.style-scope) and preventing the CSS from affecting the <span> tag.

As I understand it, the <span> tag shouldn't have style-scope applied to it at all in this case.

[arthurevans]

I'm thinking we special case binding to the class attribute, and we are not handling it correctly for the helper elements.

[kevinpschaaf]

Nice catch, thanks for the bug report. We'll look into the fix.

[supachailllpay]

Hi I'm not sure this still have a problem or it should to be? In my case I found a style-scope added when I use with innerHTML.

<dom-element id='element1'>
  <div>
    <template is='dom-bind'>
      <span class='red'>Content</span>
    </template>
  </div>
</dom-element>

<dom-element id='element2'>
  <div>
    <template is='dom-bind'>
      <span class='red'>Content</span>
    </template>
  </div>
</dom-element>

<script>
  window.addEventListener('WebComponentsReady', function () {
    element1.change("<div><template is='dom-bind'><span class='red'>Content</span></template></div>");
    element2.change("<div><span class='red'>Content</span></div>");
  });
</script>

and

<dom-module id='dom-element'>

  <template>
    <div id='container'>
      <content></content>
    </div>
  </template>

  <script>
    Polymer({
      is: 'dom-element',
      change: function (html) {
        this.$.container.innerHTML = html;
      }
    });
  </script>

</dom-module>

Thank you.