1. We have no means in shadow dom to mark certain tags as optional based on certain property. Imagine I create <x-button> element which extends 'button' and my template looks like:
<template>
<span class='ctrl-inner'>
<span class='ctrl-icon'></span>
<span class='ctrl-text'><content></content></span>
</span>
</template>
Now I wish that 'ctrl-icon' tag is optional based on value of
let say 'icon' property of element. What is your stand on this? Is
something like this considered and if not what you see as 'correct' way
of handling this:
- Have template like posted above and in component
code remove that tag via program code
- Do not have that tag in template and later add it
via program code
2. Are you considering some kind of 'property' binding available in ShadowDom next to <content> tag which will allow us to use value of certain property? For example imagine in sample above my web component exposes a property 'icon' which received value of 'icon-cancel'. Now I wish my rendered dom to look like:
<button>
<span class='ctrl-inner'>
<span class='ctrl-icon icon-cancel'></span>
<span class='ctrl-text'>Cancel</span>
</span>
</button>
So I'm more or less looking for something like: <span
class='ctrl-icon {{icon}}'></span> where similar to MDVs we probably use
element itself as a 'model'?
3. If I assume no property binding is available or considered, then I have to program UI linked to certain property manually (which is no problem by itself), but then what is your stand on setting this property via program code? If I do something like:
elem.icon = 'icon-cancel'
Do you thing component programmers should code that into property
setter themselves or this should be included probably via
MutationObserver on 'higher' level?
Please if this is not a correct place for those questions, to excuse me and probably point me into suitable address. Thx in advance
Regards Dimitar Draganov
