my-component.html

<link rel="import" href="/bower_components/polymer/polymer.html">

<!-- Define web component name and public API (attributes) -->
<polymer-element name="my-component" attributes="name settings">
    <template>
        <p>Hello {{name}}, I can't believe <strong style="font-size:{{settings.size}}; color:{{settings.color}};">this is your favourite color!</strong></p>
    </template>

    <script>
        Polymer('my-component', {
            // Fires when an instance of the element is created. Define attributes defaults. Initialize non string attributes.
            created: function() {
                this.name = 'Jon Coucou';
                this.settings = {
                    color: 'green',
                    size: '40px'
                };
            },

            // Fires when the element’s initial set of children and siblings are guaranteed to exist
            domReady: function() {},

            // Fires when the "<polymer-element>" has been fully prepared
            ready: function() {},

            // Fires when the element was inserted into the document
            attached: function() {},

            // Fires when the element was removed from the document
            detached: function() {},

            // Fires when an attribute was added, removed, or updated
            attributeChanged: function(attr, oldVal, newVal) {}
        });
    </script>

</polymer-element>