Strictly Programming

Polymer: a basic page

Posted in Polymer by sqllyw on 08/22/2016

Here is a simple Polymer based page, just create an index.html, and copy and paste the following code into it:

<!doctype html>

<html>

<head>

    <title>Polymer1</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- import latest release version of all components from polygit -->
    <base href="https://polygit.org/components/">
    <script src="webcomponentsjs/webcomponents-lite.js"></script>
    <link href="polymer/polymer.html" rel="import">

</head>

<body>

    <app-view></app-view>

</body>

<dom-module id="app-view">
    <template>
        <style>
            :host {
                display: block;
            }
        </style>
        <p>Hello {{prop1}}</p>
    </template>

    <script>
        Polymer({
            is: 'app-view',
            properties: {
                prop1: {
                    type: String,
                    value: 'Polymer',
                },
            },
        });
    </script>
</dom-module>

</html>

serve it from any web server, example, from python:

python -m SimpleHTTPServer

then access following url in Chrome browser:
http://localhost:8000
Try it in jsFiddle

Advertisements
Tagged with:

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: