awesome-custom-elements

README.md

A collection of usable, lightweight custom elements

• https://grafikart.github.io/headless-elements/?path=/docs/scroll-top--default-story
• Github Time Elements by GitHub.
• Router Manager by Erik Ringsmuth.
• Responsive Embed by Joselito Júnior. Add YouTube, Vimeo and other multimedia content to your pages, letting the browser calculate the height based on the width of their containing block. You just have to define the aspect ratio of the media.
• Lottie Player

Some catalogues

• Polymer Elements Catalog

Comments below are draftpad

Redefining custom elements
https://gist.github.com/janwirth/60797dd30c0b472dad5761e53423790a

Using proxies to abduct an element of elm's VDOM for things like portals
https://gist.github.com/janwirth/6f1c3cb2723ef2eed578c1d695447533

Note: one can use defineGetter to create reactive properties.

Very popular framework: https://stenciljs.com/

Draft of a spec:

{-| Render the datepicker custom element -}
viewElement : String -> Html.Styled.Html String
viewElement value =
    let
        root =
            Html.Styled.node "elm-element-provider" [ Html.Styled.Attributes.attribute "info" info ] [ inputEl ]

        info =
            "{\"name\":\"DatePicker_\", \"date_value\": [\"down\", \"up\"]}"

        inputEl =
            Html.Styled.node "date-picker_"
                [ Html.Styled.Attributes.attribute "date_value" value
                , Ev.on "date_value" (Decode.field "detail" Decode.string)
                ]
                []
    in
    root```

Why react does not embrace custom elements
facebook/react#5052

• react has a "one-way data flow, non-imperative"
• custom elements have no SSR support

SSR custom elements
https://dev.to/thepassle/server-side-rendering-vanilla-custom-elements-in-astro-5hgg

Wheel picker:
https://ellie-app.com/j5kZnwCGhz4a1

(updated version in go-outreach / gearbag codebase)

Date format
https://ellie-app.com/5kVDg84zBXYa1

Lazy loading:
https://stenciljs.com/docs/distribution#:~:text=To%20start%2C%20Stencil%20was%20designed,components%20actually%20used%20are%20downloaded.

Portal web component for elm
https://gist.github.com/wolfadex/45ae81f73c79a1c092cdba60aa218201

Dropdown
https://gist.github.com/janwirth/b65903d19caf919698ef72a79b521ad8

Fetching data / hooks with custom elements

https://ellie-app.com/jDDr5jYsYW7a1

Quoting @billstclair from the elm slack.

In using TweetDeck recently, I noticed that it responds properly to my Mac settings, entering Dark mode at night and going back to Light mode during the day. I didn’t know before now that there was an HTML DOM API for that, so I found it, and created a custom-element to send those notifications to Elm.
An example is at mammudeck.com/watch-color-scheme.html (change your system color scheme and watch the example window change).
To get it to work in your own application, you need two files:
The CustomElement.WatchColorScheme module.
watch-color-scheme.js, which must be loaded in the head section of your index.html.
Then you add a watchColorScheme element to your view method, with an onChange attribute, and a Msg to handle the changes.
This commit shows those two, plus the other files necessary for the example (and a lower-level example, which tests the JS in JS, without Elm).
I have not yet integrated this into the Mammudeck application. Soon.
I also haven’t tested the code on Windows or Linux, or in any non-Chromium browsers (I did Brave and Chrome on my M2 MacBook Air). If you do so, and it doesn’t work, please let me know.