Web Component support

I was wondering if there is any interest in supporting Web Components in Laminar? I am not sure if there is anything that actually needs to change in the core project, perhaps just having an example of a proper way to add and use Web Components. This would hopefully alleviate the complaint that Laminar has no ready to use components.

I got a proof of concept working as follows:

1. In the host page’s head, add:

  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet">
  <script type="module" src="https://unpkg.com/@material/mwc-button?module"></script>

1. Now you have mwc-button html tag that behaves just like any other tag. Use it in Laminar (this is just a random button added in TodoMVC example):

L.htmlTag("mwc-button", void = false)(
        new ReactiveHtmlAttr[String]("label", StringAsIsCodec) <-- itemsVar.signal.map(i => s"${i.count(!_.completed)} items"))

In summary, the process to add a Web Component is:

1. Import component’s javascript
2. Define Laminar tag / attributes based on component’s documentation

What is the best way to do those two things? In particular:

1. Referencing an npm module from unpkg like this, while functional, is very inefficient - those modules should somehow be bundled with the rest of js. How can this be done?
2. What is the proper way to define custom tags? I didn’t see any docs for this. Also once defined, what’s the best way to make them available to the app?

Thanks for making Laminar!

[raquo]

Cool, thanks for your help too, I merged the examples web-components branch into master.

I will also create material component library using this pattern when I get a chance, in a separate repo.

That would be so awesome, people have been asking for this kind of thing forever! It doesn’t even need to be comprehensive from the start, I think you’ll find contributors for such a project pretty easily if you just start with something.

Cheers

[raquo]

I am also not a huge fan of the underscore syntax to define custom element’s attributes, but I also don’t have better ideas. Normally builder style would be cleaner I think, but then it would be inconsistent with how built-in elements are defined.

I don’t really want this template to be part of Laminar itself, it’s just an example in the other repo. As you see there isn’t much to abstract away, it’s only slightly more involved than writing a regular JS facade. If you want to create a different Web Components example with a different approach that would be great, feel free to add it to that branch, laminar-examples is specifically for showcasing a variety of styles and patterns.

Anyway stylistics aside, I’ve published Laminar v0.10.2 that has the slot reflected attribute and the CSS fix, so it looks like on the library side we have Web Components support covered pretty much. Thanks for your help! I’ll write the docs a bit later.