diff --git a/README.md b/README.md index a4f2eda82418c071a6936ca892e4a5e2229d7645..ac266620943d4e0719f134e6823e6996531f6cdd 100644 --- a/README.md +++ b/README.md @@ -17,7 +17,7 @@ theme layer that gives each widget a concrete visual and interactive design. Elements -------- -The Sky engine contains a handful of primitive elements and the tools with which +The Sky engine contains [a handful of primitive elements](specs/markup.md) and the tools with which to create custom elements. The following elements are built into the engine: - ``script``: Executes script @@ -27,9 +27,10 @@ to create custom elements. The following elements are built into the engine: - ``template``: Captures descendants for use as a template - ``content``: Visually projects descendents of the shadow host - ``shadow``: Visually projects older shadow roots of the shadow host - - ``image``: Displays an image + - ``img``: Displays an image - ``a``: Links to another Mojo application - ``title``: Briefly describes the current application state to the user + - ``t``: Preserve whitespace (by default, whitespace nodes are dropped) ### Additional Elements ### @@ -64,10 +65,19 @@ For example, the ``AnnualReport`` constructor uses the ``BalanceSheet`` class exported by that module. ```html - - +SKY MODULE + + - [ ... custom element definition ... ] +class extends SkyElement { + constructor () { + this.addEventListener('click', (event) => this.updateTime()); + this.createShadowTree().appendChild('Click to show the time'); + } + updateTime() { + this.shadowTree.firstChild.replaceWith(new Date()); + } +}