`, then setting `element.boundClass` will always leave "oneClass" untouched. ##### Events, Methods and Nodes You cannot *get* events (`element.accessorE` will raise an exception) and you cannot *set* methods or nodes (`element.methodName = 'x'` and `element.accessorN = 'x'` will each raise exceptions). Nodes you can only *get* and then have full access to their DOM APIs. Exception: you *can* set cuel-component-nodes. Cuel considers them proxy objects with which to manipulate DOM. Setting an object to a cuel-component-node will internally `Object.apply(node, obj)`. This *only* works, when the cuel-component has already been initialized. That means, you'll have to include it's definition before setting to it. Otherwise you get an exception. Methods can only be called. `element.methodName()` will call the node's `domNodeMethod` with the same arguments. You can assign to events, but you should assign DOM events to them, e.g. `element.accessorE = new CustomEvent('foo', {detail: 'bar'})`. This will emit the event on the bound node. You *may* also just pass the custom event ini and cuel will generate the event for you: ```JavaScript cuel('event-binding', {emit() {this.event = {detail: 'data', bubbles: true};}}, '

' ); ``` When `element.emit()` is called cuel will do ```JavaScript divElement.dispatchEvent(new CustomEvent('bang', {detail: 'data', bubbles: true})); ``` #### Change Notifications Cuel can also track changes and events in the DOM for you. It will do that, if it finds a *setter* for the bound property on the bound object. Let's assume the JavaScript class of the object bound in the table above looks like this: ```JavaScript class MyDomHandler { set accessorA(a) {} set accessorE(e) {} set accessorT(t) {} } ``` Then Cuel will call the respective setter when the bound attribute or text changes, or accessorE if the event `domEventName` is triggered on the bound DOM node. Note that you can then not set the respective DOM property yourself using that accessor! This inherently prevents circular bindings. There are still ways to shoot yourself in the foot with circular bindings, but not that easyly. This does notably *not* work for DOM properties! Use events to track their changes. #### Host Binding Your host node - the element which you are defining with cuel, i.e. with customElements.define - is not part of you element's template. Thus you cannot do data bindings to the host node in the template. If you need data bindings on the host node, you may use the `host` option in the options object: ```JavaScript cuel('hello-world', {}, {host: '.innerHTML=content'}); const helloWorld = document.createElement('hello-world'); helloWorld.content = 'Hello world!'; document.body.appendChild(helloWorld); ``` You may create any number of bindings on the host node. ### class, mix-in & the `render` method As noted above, you can pass cuel a class or a mix-in. ```JavaScript cuel('cl-ass', class extends HTMLElement {}); cuel('mix-in', {}); ``` Now, `customElements.define`, which cuel calls for you, requires something extending `HTMLElement` so cuel will create one for you if it does not get one, adding the methods from the `mix-in` to it. In _any case_ it will add a `render` method to your element, which will be called when the element is connected to the DOM. For this it will create a `connectedCallback` which renders your element. Note: in case you do not provide a `connectedCallback`, the `connectedCallback` created by cuel will do the initial rendering and there will be no extra `render` method! However, if you provide a `connectedCallback` yourself, cuel will generate a `render` method for you. Thus, if you provide a `connectedCallback`, you should probably call `this.render()` in your `connectedCallback` method - or elsewhere in the lifecycle of your element. ```JavaScript cuel('mix-in', { connectedCallback() { this.render(); } }, 'Hello world!' ); ``` ### ifTemplate `ifTemplate` is cuel's conditional rendering facility. ```JavaScript function render(count, template) { cuel(`if-template-${count}`, {}, template); const ift = document.createElement('if-template-1'); document.body.append(ift); return ift; } const ift1 = render(1, 'Hello!'); ift1.greet = true; // now you see "Hello!" ift1.greet = null; // now you don't /*** You'll often want to render DOM with placeholders conditionally: ***/ const ift2 = render(2, '{{greet}} {{whom}}!'); ift2.greeting = {greet: 'Hello', whom: 'World'}; // now you see "Hello World!" /*** Or just render some configurable text: ***/ const ift3 = render(3, '{{*}}'); ift3.text = 'Hello World!'; // now you see "Hello World!" /*** Render several shallow nodes: ***/ const ift4 = render(4, ''); ift4.who = 'World'; // now you see "Hello World!", just text, no extra elements /*** Finally, conditionally render and bind cuel (cuel only!) components: ***/ cuel('sub-component', {}, '{{greeting}} from sub-component!'); const ift5 = render(5, '` element: ```JavaScript cuel('if-template', {}, ''); ``` #### Custom Conditions You can define your own conditions in the `ifTemplate` option: ```JavaScript cuel('if-template', {}, { template: '{{myIf}}', ifTemplate: {myIf: { if: x => x % 2, template: 'odd', }}, }); const ift = document.createElement('if-template'); document.body.append(ift); ift.myIf = 3; // now you see "odd" ift.myIf = 2; // now you don't ``` ### dynamic binding Consider this code: ```JavaScript const ift = document.createElement('if-template'); document.body.append(ift); ift.greet = true; cuel('if-template', {}, 'Hello!'); ``` Note how the element is first created, then its conditional property is set and only *then* it is defined. Before that definition, `greet` has no special meaning, it's just a random property name with the value `true` added to an unknown custom element. But when cuel instantiates your custom element it will pick up the already existing property and in this case render the conditional sub-template text "Hello!". Cuel does that with all bound properties. ### loopTemplate `loopTemplate` is somewhat similar to `ifTemplate`. But it will instantiate its content once for each element of the array you set to the respectively named property. ```JavaScript cuel('loop-template', {}, '

{{label}}: {{value}}

'); const loopt = document.createElement('loop-template'); document.body.append(loopt); loopt.list = [ {label: 'first item', value: 1}, {label: 'second item', value: 2}, ]; ``` This renders an unordered list with two items: * first item: 1 * second item: 2 As with `ifTemplate`s, you can also render shallow looped DOM inline: ```JavaScript cuel('loop-template', {}, ''); const loopt = document.createElement('loop-template'); document.body.append(loopt); loopt.list = [1, 2, 3]; ``` This renders: ```HTML Value: 1
Value: 2
Value: 3
``` And bind sub-components: ```JavaScript cuel('loop-template', {}, ''); const loopt = document.createElement('loop-template'); document.body.append(loopt); loopt.list = [ {greeting: 'Hello'}, {greeting: 'Hi'}, ]; ``` This renders: ```HTML Hello from sub-component! Hi from sub-component! ``` You can also loop `