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
This commit is contained in:
parent
7dcdf11b95
commit
fba37a0398
25
examples/example-element/example-element.sky
Normal file
25
examples/example-element/example-element.sky
Normal file
@ -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>
|
16
examples/example-element/index.sky
Normal file
16
examples/example-element/index.sky
Normal file
@ -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>
|
Loading…
x
Reference in New Issue
Block a user