How to apply page css to a polymer component


Tags: html,css,css3,polymer

Problem :

I want my polymer component to use styles from 'normal' stylesheet. So I added shim-shadowdom to the style and /deep/ to the class, like this:

<html>
  <head>
    <style shim-shadowdom>
      .mylink /deep/  {color: orange;}
    <style>
  </head>
  <body>
    <my-link></my-link>
  </body>
</html>

and then component:

<polymer-element name="my-link">
   <a class="mylink" href="#">xxx</a>
</polymer-element>

But this doesn't work neither in chrome - the link still has its usual color - no in ff and ie - the links are orange there, but they are orange even without /deep/ or shim-shadowdom.

The question - what am I doing wrong here?

Polymer version - 0.5.5.

PS: except styling, polymer works as expected - all components are shown up, ajax sends its requests and so on.



Solution :

You're going to need my-link /deep/ .mylink

Edit: Also, surround the <a> with a <template> element. Make sure your element is imported!


    CSS Howto..

    Having problems implementing a jQuery photo slideshow

    how to display php search engine execution time and number of results before the results

    How to Overcome Bootstrap's Default Styling? Element targeting issues?

    How can I put CSS and HTML code in the same file?

    How to make text appear under div without moving other items in list?

    How to align text and image in a CSS box?

    How to set Bullet colors in UL/LI html lists via CSS without using any images or span tags [duplicate]

    How can I better regulate BootStrap's width styling from scaling down elements at specific width sizes?

    How do I change this flipping card to rotate itself onclick?

    how to align divs with different width within another parent div?

    How can I hide slide menu in appcelerator?

    How to transform xPath to CSS Selector

    Jquery button click to show div right to left with slide animation

    How to make a space between tags (icons) in table?

    How to adjust the length of input

    How to emulate this layout in CSS?

    How to highlight a row in a table on certain occasions

    How do you make speech bubble with Tooltipsy?

    how to transform in both X & Y direction with CSS Only [duplicate]

    How to get an image to resize on scroll?

    How to change the input field's text color in MaterializeCSS?

    how to make a div toggle background-position “onclick” while keeping hover

    How to increase width of image when dimensions are not known in CSS?

    Fontawesome: How to control height and width of stacked icons

    How dynamically aligning text on website

    How to target separated class names through css?

    How to use jQuery for hover effects

    How to set width of a
    in CSS to X number of pixels less than the width:auto?

    How to call a function for each element with a particular class, every time the window scrolls (jquery))

    how to scroll down|up animatedly in jquery css?