how to add style of host element in Google polymer framework

Nirav Alagiya

like this

<polymer-element name="ele-polyrow"  extends="div">


</polymer-element>

is it possible to add style of ele-polyrow element.

DocDude

Sure. Use the :host pseudo-class from inside the element's template. There are a couple of things to note, though:

  • If you extend a built-in element like div, to use the element you need to use <div is="ele-polyrow"> rather than just <ele-polyrow>.
  • If the element doesn't include a constructor, you need to add the noscript attribute, and Polymer will automatically register it for you.

Put these things together and you get:

<polymer-element name="ele-polyrow"  extends="div" noscript>
  <template>
    <!-- shadow DOM for the element -->
    <style>
      :host {
        outline: 2px solid red;
      }
    </style>
    <!-- display any children -->
    <content></content>
  </template>
</polymer-element>
<div is="ele-polyrow">Hey there polyrow!</div>

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

From Dev

How to style polymer element dynamically

From Dev

How to style polymer element dynamically

From Dev

how do you programatically add markers to the polymer google map element

From Dev

how do you programatically add markers to the polymer google map element

From Dev

Polymer custom element will not style

From Dev

Polymer custom element will not style

From Java

How to add "class" to host element?

From Java

Angular 2: How to style host element of the component?

From Dev

How to add dynamically extended element with Polymer?

From Dev

How to add function attribute to polymer element

From Dev

Using google polymer, how to get the width of an element

From Dev

How do I style the gold-email-input Polymer element?

From Dev

Google Polymer - how to add content to Neon elements

From Dev

Google Polymer - how to add content to Neon elements

From Dev

Add a class to polymer element

From Dev

Polymer style google-map

From Dev

Polymer : How to procedurally add nodes to a polymer-element's Light Dom, from inside the element?

From Dev

How to add css style to new element

From Dev

Shadow DOM: how to apply CSS style only if the host element is <body>?

From Dev

How do I add JavaScript DOM API to my Polymer element?

From Dev

How to add an event listener to a custom element property in Polymer?

From Dev

Polymer background-color of host element

From Dev

How to change src of an iron-image element of Google Polymer

From Dev

Polymer: How to add event listeners to custom polymer element under conditional template

From Dev

Is it possible to extend Polymer element and reuse its style?

From Dev

Is it possible to extend Polymer element and reuse its style?

From Dev

Polymer: apply style to an element under Shadow DOM

From Dev

how to vary font style with polymer

From Dev

Polymer 1.0: How to style <paper-ripple> color inside <paper-tab> element?

Related Related

  1. 1

    How to style polymer element dynamically

  2. 2

    How to style polymer element dynamically

  3. 3

    how do you programatically add markers to the polymer google map element

  4. 4

    how do you programatically add markers to the polymer google map element

  5. 5

    Polymer custom element will not style

  6. 6

    Polymer custom element will not style

  7. 7

    How to add "class" to host element?

  8. 8

    Angular 2: How to style host element of the component?

  9. 9

    How to add dynamically extended element with Polymer?

  10. 10

    How to add function attribute to polymer element

  11. 11

    Using google polymer, how to get the width of an element

  12. 12

    How do I style the gold-email-input Polymer element?

  13. 13

    Google Polymer - how to add content to Neon elements

  14. 14

    Google Polymer - how to add content to Neon elements

  15. 15

    Add a class to polymer element

  16. 16

    Polymer style google-map

  17. 17

    Polymer : How to procedurally add nodes to a polymer-element's Light Dom, from inside the element?

  18. 18

    How to add css style to new element

  19. 19

    Shadow DOM: how to apply CSS style only if the host element is <body>?

  20. 20

    How do I add JavaScript DOM API to my Polymer element?

  21. 21

    How to add an event listener to a custom element property in Polymer?

  22. 22

    Polymer background-color of host element

  23. 23

    How to change src of an iron-image element of Google Polymer

  24. 24

    Polymer: How to add event listeners to custom polymer element under conditional template

  25. 25

    Is it possible to extend Polymer element and reuse its style?

  26. 26

    Is it possible to extend Polymer element and reuse its style?

  27. 27

    Polymer: apply style to an element under Shadow DOM

  28. 28

    how to vary font style with polymer

  29. 29

    Polymer 1.0: How to style <paper-ripple> color inside <paper-tab> element?

HotTag

Archive