Repository navigation
Custom element extended built-in support and special is attribute #156
Description
document.createElement support additional options, namely is for custom elements that are extended. You can see that no additional arguments are sent to document.createElement.
Since custom elements are a goto solution for when limitations of Elm are crossed, allowing more support for them would be worthwhile. I tried in vain both using Html.Attributes.property and Html.Attributes.attribute because it must be set on element creation .
I would suggest similar to _VirtualDom_nodeNS, to have _VirtualDom_nodeIs or _VirtualDom_extendedNode that takes a string is like the namespace variable that applies it to document.createElement(tag, { is: is }). It could then be exposed in Html as a special case for Html.Attributes.is or Html.extendedNode.
This is related to Html issue elm/html#192
Activity
[-]Custom element extended built-in support and special `is` attribute.[/-][+]Custom element extended built-in support and special `is` attribute[/+]wolfadex commentedon Apr 13, 2020
From reading the docs on the
isattribute,createElement(), and extending built-ins I've thought of a couple paths that could work nicely.The first is
_VirtualDom_nodeWithOptions : Tag -> List Option -> ...whereOptionis a something similar to anAttribute. This is slightly divergent from everything inHtmlbeing like writing HTML because when you specifyisin HTML you specify it as an attribute. It does however more align with the JavaScript implementation ofcreateElement(tagName, [ options]).The second idea is to go with the
isattribute and update the virtual dom to look for attributes that act as options. This would align more with writing HTML, but make the implementation a little strange in that the VirtualDom is looking a specific attribute on an element.I do think the first option provides a more clear idea of what's going on. The user is modifying their element in an atypical manner. It's also more obvious to a person who is coming into a large code base for the first time and trying to understand why their element is behaving in a way that isn't typical of an element with that name.
dotnetCarpenter commentedon May 4, 2020
I do not have enough insight to be a proponent of any specific implementation, hence not just adding +1 to the OP. But I do want to +1 fixing extending standard HTMLElement via Web Components.
@jreusch made an example (for fun, not for real usage), https://ellie-app.com/8LXM8GVGxWWa1
But it highlights why extending the DOM with
Object.defineProperty (HTMLElement.prototypesimply does not work.Ref: https://discourse.elm-lang.org/t/calling-dom-methods-from-elm/5701/7
@pdamoc made an example of how it might look like, if there is support for
isattribute.validityis however not an attribute but a read-only property.. So ignore that part.Documentation: https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/validity
Reference: https://discourse.elm-lang.org/t/calling-dom-methods-from-elm/5701/5
enjoythelive1 commentedon May 19, 2020
Is anybody working on this or is this in active discussion? I would like to collaborate
rlefevre commentedon May 20, 2020
@enjoythelive1 According to https://discourse.elm-lang.org/t/calling-dom-methods-from-elm/5701/15 and https://caniuse.com/#search=custom%20elements, it's not possible to customize built-in elements with the
issyntax in Safari. If confirmed, this would lower significantly the interest of adding support for it.wolfadex commentedon May 20, 2020
I'm having difficulty finding the source task that was for implementing
is=in webkit but has been closed aswill not implement. In lieu of that I have found a discussion about the lack of support WICG/webcomponents#509. There other various GitHub discussions about Safari's lack of support as well.boccato commentedon Mar 7, 2022
On the discussion about the Safari issue it is recomended to use a polyfill (https://github.com/ungap/custom-elements) which not only makes it work on Safari but also on older versions of other browsers.
https://bugs.webkit.org/show_bug.cgi?id=182671
fbedussi commentedon Aug 16, 2024
The extension of build in elements works perfectly fine in Safari with the polyfill. It is really a pity that there is no way to make it work in Elm,