71–80 of 84 posts
Took a minute to figure out how to get React/Vue components to render inside of a web component, but now we're all set.
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…
Shameless plug, but we're building a no-code testing framework (https://reflect.run) that does all of this for you automatically. Works great with Shadow DOM (both open and closed) as well as more esoteric things - for example did you know Salesforce's Lightning framework overrides how Shadow DOM works? :D
Earlier quoted context omitted.
Take a look at CSS shadow parts. It allows you to mark which part of the shadow dom are stylable which you can then access using the ::part() pseudo element. Another handy thing to know is that exportparts reexports parts from a nested web component, and CSS --custom-properties will cascade down into the shadow dom https://developer.mozilla.org/en-US/docs/Web/CSS/::part
I didn't know about that and it is certainly interesting, however for my particular use case it wouldn't have worked unfortunately. I was using Tailwind, so rather than targeting specific components from a global style sheet, I was trying to use the utility classes from the global sheet inside a web component.
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.
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…
There's none except the oft-repeated "use the platform!" (as if other frameworks and libraries use something else, and not the platform).
Currently web components work, if:
- you have a large distributed team, and
- you need to have consistent elements and styling across many properties, and
- your components can be expressed as "leaf elements". That is, view-only elements. No forms, no state, only presenting some data.
Beyond that the elevator pitch is "for the past 10 years, and counting, we've been bravely trying to fix the ever-growing list of problems that web components introduced by simply being. And we're solving that by throwing more and more javascript at the problem".
A very non-exhaustive list: https://twitter.com/rich_harris/status/1198332398561353728?l...
And things like participation in forms? It's "solved" by adding Javascript: https://web.dev/more-capable-form-controls/
Which is ironic, given that the original pitch was "we're piling more and more into Javascript, and we shouldn't" https://fronteers.nl/congres/2011/sessions/web-components-an...:
--- start quote ---
I think we’re stuck today in a little bit of a rut of extensibility. We wind up leaning on JavaScript to get things, because it is the Turing complete language in our environment. It is the only thing that can give us an answer when CSS and HTML fail us. So we wind up piling ourselves into the JavaScript boat. We keep piling into the JavaScript boat.
Bruce yesterday brought up the great example of an empty body tag, and sort of this pathological case of piling yourself into the JavaScript boat, where you wind up then having to go recreate all of the stuff that the browser was going to do more or less for you if you’d sent markup down the wire in order to get back to the same value that was going to be provided to you if you’d done it in markup. But you did it for a good reason. Gmail has an empty body tag, not because it’s stupid. Gmail does that because that’s how you can actually deliver the functionality of Gmail in a way that’s both meaningful and reliable and maintainable. You wind up putting all of your bets, all of your eggs, into the JavaScript basket.
--- end quote ---
Earlier quoted context omitted.
Super easy to incorporate with React. Just use react to pass attributes, like so: class App extends React.Component { render() { return ( ) } } In your webcomponent just make sure you listen to changes to that attribute like so: static get observedAttributes() { return ['custom-attribute'] } Then you can decide how the component changes whenever that attribute is updated by using the `attributeChangedCallback` functi…
Issues arise when trying to pass objects or add event listeners for custom events due to how React specifically handles this stuff. You often have to use refs
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.
To me React's value is JSX and ReactDOM. I actually use JSX+ReactDOM without the rest of React, using basic classes. Works great.
I have a very dumb question. I'm currently trying to implement web components into a pretty basic flask site, and I'm really having trouble. Does anyone know any resources about basic implementation that I can review? I was interested in Lit, and am try to bundle that, but it's not working at all, and I really feel like I'm missing something.
Check out https://open-wc.org/ Especially their code examples
I have a very dumb question. I'm currently trying to implement web components into a pretty basic flask site, and I'm really having trouble. Does anyone know any resources about basic implementation that I can review? I was interested in Lit, and am try to bundle that, but it's not working at all, and I really feel like I'm missing something.
You can get lit-specific advice on their Slack. The link is on their docs site
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…