Step 1 : hello World

2026-03-10 08:51:20 +00:00 · 2017-12-13 10:51:08 +01:00
parent b7cccaf312
commit 4947a859e0
2 changed files with 39 additions and 0 deletions
--- a/index.html
+++ b/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <script type="text/javascript" src="/bower_components/webcomponentsjs/webcomponents-lite.js"></script>
+    
+        <link rel="import" href="/src/components/hello-world.html">        
+    </head>
+
+    <body>
+        <h1>WebComponents workshop</h1>
+        <p>In this workshop, we will have some fun with Polymer</p>
+
+        <hello-world></hello-world>
+    </body>
+</html>
--- a/src/components/hello-world.html
+++ b/src/components/hello-world.html
@@ -0,0 +1,22 @@
+<link rel="import" href="/bower_components/polymer/polymer.html">
+
+
+<dom-module id="hello-world">
+  <template>
+    <style>
+      :host {
+        font-family: sans-serif;
+      }
+    </style>
+  
+    <h2>Hello Meetup!</h2>
+
+</template>
+
+  <script>
+    class HelloWorldElement extends Polymer.Element {
+      static get is() { return 'hello-world' }
+    }
+    customElements.define(HelloWorldElement.is, HelloWorldElement);
+    </script>
+</dom-module>