<script $inline>
will become<script>
. This is the default mode<script $global>
(?) will be added to the<head>
<script onrender>
will not work without$
, i.e.<script $onrender>
We need an approach that is valid HTML and simple. <div <%= ... %>>
is NOT valid because we can't have <
or >
inside tags.
Here are the options evaluated:
- Invalid HTML
<select <%= [email protected]({required: true, ...this.$data}) %>>
<select <%: {required: true, ...this.$data} %> ></select>
<select {%: {required: true, ...this.$data} %}></select>
<select <: {required: true, ...this.$data} :></select>
<select <%= $attr({required: true, ...this.$data}) %>
- Valid HTML
<select $attr="<%: {required: true, ...this.$data} %>"></select>
<select $required="required" $="{...this.$data}"></select>
<select required:js="true" :js="{...this.$data}"></select>
<select @required="true" @="{...this.$data}"></select>
<select required:="true" :="{...this.$data}">
-- selected as the simplest
Note: These should be parseable as regular expressions. We cannot use DOMParser()
since templates need not be valid HTML (e.g. tables with Lodash templates)
We won't allow dynamic styling like this:
<style>
my-component {
width: ${width}px;
height: ${height}px;
}
</style>
<style>
is parsed only once, not per render. Instead, use inline styles (e.g. style="width:${width}px"
).
One possible reason is to subclass it. But UIFactory expects people to learn as little as possible. Subclassing is not part of this.