Live data from Hacker News

How we use web components

github.blog

51–60 of 84 posts

Re: How we use web components

#52
I'm currently working on testing a UI with Selenium that uses Shadow DOM all over the place. It's hot garbage, and I have no idea why anybody thought this was a good idea.

Something goes wrong in CI and you'd like to dump the DOM to figure out why? Too bad, the entire page is sitting inside a Shadow DOM, and you get to see an empty body tag and a timeout waiting for an element to appear.

Want to click that button that's nested 5 Shadow DOMs deep? Have fun creating a monster JS query to manually trawl though the Shadow DOMs to click it, because Selenium has no idea how to access the button. And that's if you're lucky and the Shadow DOM is marked "open". If it's marked closed, you can go sit on your thumb.

It's like someone looked at iframes and thought "hey, that's a great idea!" and never stopped to think why they were considered bad practice already 20 years ago.

Re: How we use web components

#53
post #32

Earlier quoted context omitted.

I am still wondering if ViewComponent will ever officially make it into Rails.

It is very easy to add. Rails 6.1 introduced a way to use the m without a monkeypatch ( https://github.com/rails/rails/pull/36388 ). But yeah having them natively inside Rails will help with greater adoption of components into Rails way.

Generally speaking having a default way ( or option within default ) of doing things in Rails make things a lot easier for newcomer and maintenance.

I sort of wish Rails is more of Github's Rails rather than Basecamp's rails.

Re: How we use web components

#55
I've refreshed myself on web components, templates and shadow DOM, and I understand how each of them works, but I only see immediate benefits from templates. The rest seems a bit like abstraction for abstraction's sake and syntax sugar over existing capabilities.

What am I missing, what's the elevator pitch for web-components and shadow DOM?

Scoped styles seems to be something that's pushed with shadow DOM a lot, but isn't in the page body illegal HTML (despite yes, it works)?

Re: How we use web components

#56

I'm currently working on testing a UI with Selenium that uses Shadow DOM all over the place. It's hot garbage, and I have no idea why anybody thought this was a good idea. Something goes wrong in CI and you'd like to dump the DOM to figure out why? Too bad, the entire page is sitting inside a Shadow DOM, and you get to see an empty body tag and a timeout waiting for an element to appear. Want to click that button tha…

IMO the shadow DOM should be used sparingly and in most cases not at all.

You can use web components without the shadow DOM (I've seen them being called "custom elements" then). That's what I do and I'm happy with the results.

Re: How we use web components

#57
post #25

I started using ficusjs for some experiments [2]. I built a signature button for Metamask [1]. What's great is that: - I use preact's htm as a renderer [3], which is JSX but as template strings. - The API is like (p)react but a bit more generalized. I like it. - The web component concept is great. Especially for mixing server-side rendering and JavaScript-powered components. That last one IMO is web components killer…

As far as server-side rendering, is that any different than react server-side rendering?

Re: How we use web components

#58
post #55

I've refreshed myself on web components, templates and shadow DOM, and I understand how each of them works, but I only see immediate benefits from templates. The rest seems a bit like abstraction for abstraction's sake and syntax sugar over existing capabilities. What am I missing, what's the elevator pitch for web-components and shadow DOM? Scoped styles seems to be something that's pushed with shadow DOM a lot, but…

I'm wondering about the elevator pitch too. Honestly it seems like github went through all this trouble just because they don't want to commit to a framework like react.

Still having a tough time seeing the benefits of web components.

Re: How we use web components

#59

WebComponents are an amazing replacement for jQuery, get the best of frontend Component based development without the bloat and the JS toolchain! Vanilla JS is great with WebComponents. We even write them in python with Ryzom's transpiler: ``` class DeleteButton(Component): tag = 'delete-button' class HTMLElement: def connectedCallback(self): this.addEventListener('click', this.delete.bind(this)) async def delete(sel…

as someone who regularly works w python and javascript and misses being able to just write some simple html, this code snippet is going to give me nightmares...

i assume any linter for this code will one day become sentient.

Re: How we use web components

#60

At my work web components were purposed recently for creating a ui component library of which I was skeptical. On the whole I was skeptical of web components viability and future but this post relieves some of that tension. The other thing I was worried about was that it was planned to after writing this web component lib, to wrap these components in React. Does anyone have any experience or insights into a React wra…

In a closed source project I worked for, we used wrapped web components as React components for a UI library. I cannot show something here, only the approach we have used for it: https://www.robinwieruch.de/react-web-components
Post reply on HN