Convert glass elements to Web Components

mpbagot commented

2025-10-14 16:07:52 -04:00

(Migrated from github.com)

This library currently implements the liquid glass container and buttons as Javascript builder classes. That is, a user instantiates a class which creates DOM elements and applies functionality to them. The resulting element is then extracted and inserted into the DOM as any other element might be.

The Web Components standard provides a framework-agnostic method of defining reusable components that can be used within HTML directly after registration. This commit converts the glass Button and Container classes to extend HTMLDivElement and register as custom Web Components <glass-button> and <glass-container> respectively.

For existing users, the components still provide a near-equivalent JS interface (fromOptions) for instantiation and use of the glass elements, whilst now also providing the option for use directly in HTML.

This library currently implements the liquid glass container and buttons as Javascript builder classes. That is, a user instantiates a class which creates DOM elements and applies functionality to them. The resulting element is then extracted and inserted into the DOM as any other element might be. The Web Components standard provides a framework-agnostic method of defining reusable components that can be used within HTML directly after registration. This commit converts the glass Button and Container classes to extend HTMLDivElement and register as custom Web Components \<glass-button\> and \<glass-container\> respectively. For existing users, the components still provide a near-equivalent JS interface (fromOptions) for instantiation and use of the glass elements, whilst now also providing the option for use directly in HTML.

❤️ 1

mpbagot commented

2025-10-14 16:10:29 -04:00

(Migrated from github.com)

I'm happy to rework anything if you don't like some of my changes, or if you're not happy with the code/commit style. I understand that I may well have also introduced a different syntax style to the JS in places without ESLint to kick me for mistakes.

Or if you completely dislike this as an idea for the library, I'm happy to close this PR.

I'm happy to rework anything if you don't like some of my changes, or if you're not happy with the code/commit style. I understand that I may well have also introduced a different syntax style to the JS in places without ESLint to kick me for mistakes. Or if you completely dislike this as an idea for the library, I'm happy to close this PR.

This pull request can be merged automatically.

You are not authorized to merge this pull request.

View command line instructions

Checkout

From your project repository, check out a new branch and test the changes.

git fetch -u origin mpbagot/feature/web-components:mpbagot/feature/web-components

git switch mpbagot/feature/web-components

Merge

Merge the changes and update on Forgejo.

Warning: The "Autodetect manual merge" setting is not enabled for this repository, you will have to mark this pull request as manually merged afterwards.

git switch main

git merge --no-ff mpbagot/feature/web-components

git switch mpbagot/feature/web-components

git rebase main

git switch main

git merge --ff-only mpbagot/feature/web-components

git switch mpbagot/feature/web-components

git rebase main

git switch main

git merge --no-ff mpbagot/feature/web-components

git switch main

git merge --squash mpbagot/feature/web-components

git switch main

git merge --ff-only mpbagot/feature/web-components

git switch main

git merge mpbagot/feature/web-components

git push origin main

Rows
Columns

Convert glass elements to Web Components #1

Checkout

Merge