How to use external web components? #587

kulak · 2023-03-18T09:31:13Z

kulak
Mar 18, 2023

How would one use a custom html element used by web components in builder and macro syntax?

Example: https://www.webcomponents.org/element/quarkd

<!DOCTYPE html>
<html lang="en">
  <body>
    <quark-button loading="false" id="btn">Button</quark-button>
  </body>

  <script src="./node_modules/quarkd/lib/button/index.js" />
  // or cdn
  <script>
    window.addEventListener(function () {
      const el = document.getElementById("btn");
      el.loading = true;
      setTimeout(() => {
        el.loading = true;
      }, 2000);
    });
  </script>
</html>

Answered by sapphire-arches

Mar 19, 2023

I'm not super familiar with web components, but perhaps sycamore::builder::tag is what you're looking for? That will give you a builder that pastes an arbitrary tag in to the generated HTML.

View full answer

kulak · 2023-03-18T09:33:13Z

kulak
Mar 18, 2023
Author

I think documentation has answer for macro based solution, but it is not clear if there is solution for builder.

view! { cx,
    // Custom elements!
    my-custom-element {}
}

0 replies

sapphire-arches · 2023-03-19T21:56:36Z

sapphire-arches
Mar 19, 2023

I'm not super familiar with web components, but perhaps sycamore::builder::tag is what you're looking for? That will give you a builder that pastes an arbitrary tag in to the generated HTML.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

How to use external web components? #587

Uh oh!

{{title}}

Uh oh!

Replies: 2 comments

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Uh oh!

How to use external web components? #587

Uh oh!

kulak Mar 18, 2023

Replies: 2 comments

Uh oh!

kulak Mar 18, 2023 Author

Uh oh!

sapphire-arches Mar 19, 2023

kulak
Mar 18, 2023

kulak
Mar 18, 2023
Author

sapphire-arches
Mar 19, 2023