想要使用某个组件，在 CSS 文件中选择它，然后添加 --html:(your markup here)；

h1 { --html:( This is a headline ); }

如果希望通过标签产生效果，如下

<component>My Component</component> component { --html:( <h2>${yield}</h2> <p>This is a component</p> ); }

就会呈现为

<component> <h2>My Component</h2> <p>This is a component</p> </component>

JavaScript

如果想使用 JavaScript 从 HTML 中直接定义事物的行为，在 CSS 文件中就可以执行此操作。

.item { cursor: pointer; --js:( function toggle() { this.classList.toggle(‘active‘); } this.addEventListener(‘click‘, toggle ); ); }

添加数据方法

使用 --data(key:[data]) 属性

nav { --data:( name: [‘one‘, ‘two‘, ‘three‘], link: [‘#one‘, ‘#two‘, ‘#three‘], ); --html:( <a class=http://www.mamicode.com/"item" href=http://www.mamicode.com/"${data.link[0]}">${data.name[0]}</a> <a class=http://www.mamicode.com/"item" href=http://www.mamicode.com/"${data.link[1]}">${data.name[1]}</a> <a class=http://www.mamicode.com/"item" href=http://www.mamicode.com/"${data.link[2]}">${data.name[2]}</a> ); --js:(console.log(data)); }

框架案例

https://codepen.io/ekwonye/full/QXEzZv

https://codepen.io/scottkellum/pen/WqwjLm