render
Syntax
render: (string) [every (time)] [after (time)][, (string)...];
This is a way to output text into a target selector.
You can render components or just regular text, including HTML, and it will be rendered inside the target selector.
This example covers both rendering a component (the component is the "{|...}") and rendering regular text:
#myButton:click {
#displayArea {
render: "<p>Gosh!</p>";
}
#displayArea2 {
render: "<div>Here is something from a component: {|nameComponent}</div>";
}
}
@component nameComponent privateEvents {
&:beforeComponentOpen {
$name: "Geoff";
}
p:click {
render-before-end: " Stop clicking me! Stop!";
}
html {
<p>Hello {$name}!</p>
}
}Rendering an iframe
Active CSS offers an easier method of creating an self-generated iframe that does not have a src URL. This can be notoriously tricky to do in native JavaScript - the srcdoc attribute doesn't work very well for large web pages, so you have to direct change the iframe property through JavaScript or use a blob URL and get weird.
In Active CSS, the syntax is this:
render: "<iframe><html><body><p>Hi</p></body></html></iframe>';That's it. Just include the content in between the iframe tags and it will draw. You can include scripts, styles and everything in between the iframe tags. Do bear in mind though that this is a dynamic technique only. Iframe tags from pre-rendered HTML will not be automatically rendered by Active CSS. So if you want accessibility to the max and need to use the native insides of the iframe to display fallback text in case of unsupported iframes in a browser, you should use regular pre-rendered HTML and not use the above method.
But the above method is pretty cool and is very useful.