diff --git a/content/guide/06-special-components.md b/content/guide/06-special-components.md index ef661d089..230fae56c 100644 --- a/content/guide/06-special-components.md +++ b/content/guide/06-special-components.md @@ -25,6 +25,81 @@ Sometimes, a component needs to embed itself recursively — for example if you ``` +### <:Component> tags + +If you don't know what kind of component to render until the app runs — in other words, it's driven by state — you can use `<:Component>`: + +```html + foo +<:Component {foo ? Red : Blue} name='thing'/> + + +``` + +```html-nested-Red +
Red {{name}}
+``` + +```html-nested-Blue +Blue {{name}}
+``` + +> Note that `Red` and `Blue` are items in `data`, *not* `components`, unlike if we were doing `small
+``` + +```html-nested-Medium +medium
+``` + +```html-nested-Large +LARGE
+``` + +```hidden-data +{ + "size": "medium" +} +``` + + ### <:Window> tags The `<:Window>` tag gives you a convenient way to declaratively add event listeners to `window`. Event listeners are automatically removed when the component is destroyed.