Simple div tag with a classname not rendering style on Google Chrome - works on IE 11 and FF

[cha...@sekhar.net]

Here is a sample code I have:

<polymer-element name="x-cards">

<template>

<div class="myclass">

Here is my formatted text

</div>

</template>

<script>
 Polymer("x-cards", {});
</script>

</polymer>

When I have just the div on my html page, it shows up well, when I include this <x-cards></x-cards> the formatting is gone. It works perfectly fine on IE11 and FireFox. Doesn't work on Google Chrome. What could be wrong?

Thanks.

[Eric Bidelman]

It's hard to say without seeing a test page, but in Chrome, you're probably

seeing the effects of native Shadow DOM. .myclass won't apply to nodes within your element's shadow dom. You'll need to move the style rules inside your element.

<polymer-element name="x-cards" noscript>

<template>

<style>.myclass {...}</style>

<div class="myclass">

Here is my formatted text

</div>

</template>

</polymer>

Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups "Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/9e11ede3-7cbe-4bb3-9add-c6bf69457d80%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Chandra Sekhar]

You are the man. Yes after I added the stylesheet reference inside the template tag, it took care of the issue.

Thanks a bunch.

Chandra Sekhar