I’ve heard that it’s possible to utilize WCs, or more specifically, custom elements as an alternative to JS interop via ports. I think I’ve heard folks use this technique with drag and drop, for example.
Can someone explain or provide code snippets on how this would work? I’m aware that one can create an arbitrary DOM node in Elm with Html.node but don’t quite grok the data passing techniques.
Disclaimer: this is based on my limited understanding of custom elements – please correct me if I got something wrong!
Think of an
<input> element. It does a lot more than a
<span>, but it’s still a single element. The implementation logic is hidden away, so all you need to do is set some attributes and/or properties and you’ve got a nice text input.
<input>s use the shadow dom!).
As far as how to create a custom element, I’d refer you to that MDN page you linked. Is there anything in particular that was confusing on that page?
something like the following in the view?
[ Html.Attributes.property "xCoord" myX
, Html.Attributes.property "yCoord" myY
[ ... ]
@luke did a presentation on custom elements, at the Oregon Meetup. Here is a link to his presentation notes, with links to examples. Not drag and drop, but maybe useful.
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.