mavo
mavo copied to clipboard
mavoweb
Use custom element for helper variables instead of <meta>
<meta> does not work in SVG contexts, it's recognized as an HTML element and kicked out of the SVG.
We should use a <mv-*> custom element instead (which can also have a more descriptive name and syntax).
Suggestions?
What do you think of using <mv-property> as such an element? We already use an attribute with the same name, so, to my mind, it's natural to stick to it since we element we are going to add will have the same semantic—declaring a property/collection. So we don't need to learn anything new. Is it a bad practice?
Always think of example code when proposing names or syntaxes. With <mv-property> you end up with things like <mv-property property="foo">bar</mv-property>. Does this read nicely? I think it's too much repetition.
Always think of example code when proposing names or syntaxes.
My bad. Sorry.
I was thinking of something like:
<mv-property name="foo" value="bar" /> or <mv-property name="foo">bar</mv-property>
What about
?
I'm OK with this too. Will it be hidden out of the edit mode like meta?
Once we have this custom property could it also be used in other contexts where <meta> gets kicked out, e.g. inside a <table>?
Always think of example code when proposing names or syntaxes.
My bad. Sorry.
No need!
I was thinking of something like:
<mv-property name="foo" value="bar" />or<mv-property name="foo">bar</mv-property>
These are still regular properties, they need to use the same attributes. Also custom elements cannot be self-closing (yet)
I'm OK with this too.
I just realized, this would be a problem if we adopt the mv-data attribute proposed in #643 🤔
Will it be hidden out of the edit mode like
meta? Yes.
Once we have this custom property could it also be used in other contexts where
<meta>gets kicked out, e.g. inside a<table>?
Oh good point. No, it appears to be hoisted still. <template> on the other hand is not (I also checked with <select>). So perhaps we can (ab)use <template> for this?
Inspect the DOM here: https://dabblet.com/gist/47fe643dc2dfd0118cf2e83e55e9af15