You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+14-4Lines changed: 14 additions & 4 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -16,18 +16,26 @@ It comes as a script that plugs diretly into the DOM and have new semantics take
16
16
17
17
## Capabilities
18
18
19
-
OOHTML adds three new set of capabilities to HTML:
19
+
### A component system
20
20
21
-
-**A component system**. OOHTML enables a simple "define-and-use" system in HTML that is based on two complementary elements — the `<template def>` and `<import ref>` elements. It makes it really easy to share repeating structures and stay organized.
22
-
-**Data-binding and reactivity**. OOHTML gives HTML the concept of data-binding (`{ expression }`) and reactivity that lets you embed application data in markup and have them stay in sync with application state. You get framework-grade reactivity without the overhead.
23
-
-**New scoping behaviours**. OOHTML extends the standard CSS scoping syntax to support the familiar `<style scoped>` syntax, introduces scoping for scripts (`<script scoped>`), and solves namespacing for IDs (`namespace`). They form a complete scoping system that is both declarative and powerful.
21
+
OOHTML enables a simple "define-and-use" system in HTML that is based on two complementary elements — the `<template def>` and `<import ref>` elements. It makes it really easy to share repeating structures and stay organized.
22
+
23
+
### Data-binding and reactivity
24
+
25
+
OOHTML gives HTML the concept of data-binding (`{ expression }`) and reactivity that lets you embed application data in markup and have them stay in sync with application state. You get framework-grade reactivity without the overhead.
26
+
27
+
### New scoping behaviours
28
+
29
+
OOHTML extends the existing CSS scoping system to support the familiar `<style scoped>` syntax, introduces scoping for scripts (`<script scoped>`), and solves namespacing for IDs (`namespace`). They form a complete scoping system that is both declarative and powerful.
24
30
25
31
## Overview
26
32
27
33
All of the above can be seen in a three-step tour. Each sample document below can be previewed directly in the browser:
28
34
29
35
### 1. Write HTML as Reusable Components
30
36
37
+
A good first thing about OOHTML is its component system. It lets you write HTML as reusable components.
38
+
31
39
The standard `<template>` element already lets you define reusable markup. OOHTML completes the idea by introducing the `<import>` element. Together, they form a declarative component system.
32
40
33
41
You write the following:
@@ -92,6 +100,8 @@ It resolves to the following, at runtime:
92
100
93
101
### 2. Do Data-Binding with Standard HTML Comments
94
102
103
+
A good next thing about OOHTML is its data-binding and reactivity features.
104
+
95
105
OOHTML follows the conventional syntax for data-binding — `{ expression }` — but has that written inside HTML comments: `<?{ expression }?>` or `<!--?{ expression }?-->`. These start life as normal HTML comments but render application data at runtime.
0 commit comments