From fba37a03981b6bbba8a3c870d397cdff54c0d582 Mon Sep 17 00:00:00 2001
From: Adam Barth <abarth@chromium.org>
Date: Fri, 20 Feb 2015 21:45:36 -0800
Subject: [PATCH] Add a basic sky-element custom element

After this CL, you can use <sky-element> to describe custom elements. The
current iteration is very basic and is hardcoded to "example", but its a start.

This CL renames the |init| function to |_init| to prevent importers from
calling it directly. Also, we now pass the <script> element to |_init| to give
some context.

R=ojan@chromium.org, eseidel@chromium.org

Review URL: https://codereview.chromium.org/950493003
---
 examples/example-element/example-element.sky | 25 ++++++++++++++++++++
 examples/example-element/index.sky           | 16 +++++++++++++
 2 files changed, 41 insertions(+)
 create mode 100644 examples/example-element/example-element.sky
 create mode 100644 examples/example-element/index.sky

diff --git a/examples/example-element/example-element.sky b/examples/example-element/example-element.sky
new file mode 100644
index 0000000000..097d4f54e2
--- /dev/null
+++ b/examples/example-element/example-element.sky
@@ -0,0 +1,25 @@
+<!--
+// Copyright 2015 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+-->
+<import src="/sky/framework/sky-element.sky" />
+<sky-element>
+<template>
+  <style>
+    div {
+      height: 50px;
+      width: 50px;
+      background-color: green;
+    }
+  </style>
+  <div>Hi</div>
+</template>
+<script>
+@Tagname('example')
+class ExampleElement extends SkyElement {
+}
+
+_init(script) => register(script, ExampleElement);
+</script>
+</sky-element>
diff --git a/examples/example-element/index.sky b/examples/example-element/index.sky
new file mode 100644
index 0000000000..f895fbefd4
--- /dev/null
+++ b/examples/example-element/index.sky
@@ -0,0 +1,16 @@
+<!--
+// Copyright 2015 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+-->
+<sky>
+  <import src="example-element.sky" />
+  <style>
+    example {
+      border: 1px solid blue;
+      width: 100px;
+      height: 100px;
+    }
+  </style>
+  <example />
+</sky>