- Text
- Attributes
- Classes (special-cased)
- Aria?
- Boolean attributes
- Property
- Event listener
- Conditionals (if)
- Looping (each)
.count {
text: ${count};
}
Passing a string:
.user {
prop: login "matthewp";
}
Passing a reference:
.user {
prop: login ${user.login};
}
.user {
class-toggle: "admin" ${user.isAdmin};
}
#counter {
attr: count ${!!visible};
}
.players {
each: ${players} select(#player-template);
}
.player {
text: ${player => player.name};
}
<template id="player-template">
<li>
<h1 class="player"></h1>
</li>
</template>
<ul class="players"></ul>
With context:
.players {
each: ${players} url(#player-template);
}
/* This automatically has a context of the current player */
.player {
text: @name;
}
.user .name {
text: ${user.name};
}
#admin-template {
cond: ${user.isAdmin};
}
<article class="user">
<h1 class="name"></h1>
<template id="admin-template">
<h2>Admin</h2>
</template>
</article>
Give a selector a context so you can use shorthand to assign values.
.user {
context: ${user};
}
.user .name {
text: @name;
}
The classic decorator proposal finally implemented:
<template id="details-open">
<a id="summary">
▾
<slot name="summary"></slot>
</a>
<slot></slot>
</template>
details[open] {
decorator: url(#details-open);
}
Usage:
<details open>
<summary slot="summary">Timepieces</summary>
<ul>
<li>Sundial</li>
<li>Cuckoo clock</li>
<li>Wristwatch</li>
</ul>
</details>