pass html to polymer element

Question

from the polymer documents (https://www.polymer-project.org/1.0/docs/devguide/properties) I found how to pass arguments to elements like this:

<script>

  Polymer({

    is: 'x-custom',

    properties: {
      userName: String
    }

  });

</script>

<x-custom user-name="Scott"></x-custom>

But is it possible to pass html as well? e.g.

<my-element>
     <h1>Hello world<h2>
</my-element>

I've created a 'my-element' in polymer and would like to add content to it. The polymer element sole purpose is to style all content inside (the h1).

Ben Thomas Ben Thomas · Accepted Answer · 2017-06-23T10:19:24

You can do this using the <content> element which is built into Polymer. This allows you to create an insertion point for some child content. For example declaring an element using the <content> element:

<dom-module id="my-element">
  <template>
    <style>
      ::content h1 {
        color: red;
      }
    </style>

    <content></content>
  </template>

  <script>
    Polymer({
      is: 'my-element'
    });
  </script>
</dom-module>

and then using this element:

<my-element>
  <h1>This heading is red</h1>
</my-element>

Here is more information on the content tag as well as styling the content.

pass html to polymer element

1 Answers