question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Custom element extended built-in support and special `is` attribute

See original GitHub issue

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 https://github.com/elm/html/issues/192

Issue Analytics

  • State:open
  • Created 4 years ago
  • Reactions:12
  • Comments:6 (1 by maintainers)

github_iconTop GitHub Comments

2reactions
rlefevrecommented, 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 elements, it’s not possible to customize built-in elements with the is syntax in Safari. If confirmed, this would lower significantly the interest of adding support for it.

1reaction
boccatocommented, 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

Read more comments on GitHub >

github_iconTop Results From Across the Web

Using custom elements - Web Components | MDN
Customized built-in elements inherit from basic HTML elements. To create one of these, you have to specify which element they extend (as ...
Read more >
Custom Element Best Practices - web.dev
Custom elements let you construct your own HTML tags. This checklist covers best practices to help you build high quality elements.
Read more >
Custom elements - The Modern JavaScript Tutorial
Customized built-in elements – extending built-in elements, like a customized button, based on HTMLButtonElement etc.
Read more >
4.13 Custom elements - HTML Standard - whatwg
An autonomous custom element does not have any special meaning: it represents its children. A customized built-in element inherits the semantics ...
Read more >
Supercharging Built-In Elements With Web Components "is ...
Customized built-in elements use an is attribute to tell the ... we'll extend a specific element, in this case the <div> element which...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found