Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Layout-Isolated Components

visly.app

Post reply on HN
Print view View original

31–36 of 36 posts

Re: Layout-Isolated Components

#31

Post by ss3000 »

spankalee wrote: post #26

The usefulness of this articled is lessened because it's React-specific and React is bad with DOM and style isolation in general. The base problem here is that both a component and its host may want to style the component. The component model should account for this and offer some guidance. Web components do this with the `:host` selector that styles the component from within its shadow root. The styles applied with…

> Web components do this with the `:host` selector that styles the component from within its shadow root. The styles applied with the `:host` selector can be overridden by the outside styles, without the component needing to weaken encapsulation by allowing styling from the outside via JS properties.

I don't see how the React approach of accepting styles as JS props is any weaker in terms of encapsulation compared to your example above. If anything, it offers the opportunity for stronger encapsulation because it supports limiting/transforming the styling props we accept through those JS props, and even allows us to define a styling API for our component that's completely independent of CSS semantics, enabling components APIs that can span multiple platforms with independent implementations.

Re: Layout-Isolated Components

#32

Post by lewisl9029 »

iainmerrick wrote: post #12
lewisl9029 wrote: post #10

While I agree with all of the problem statements in this article, I don't quite agree with the proposed solution of just exposing style props for parents to pass through arbitrary values, at least not as a general solution (it could still be the appropriate solution for certain special cases). I think this approach actually results in _less_ useful component isolation in that you can no longer reason about layout of…

reusable components [...] should render nothing outside of it (including empty space, i.e. margins). Could collapsing margins be an exception to this rule, in principle? I’ve mostly worked in Android, iOS and React Native, none of which have collapsing margins. But I’ve often wished they had, as it would make some layouts a lot simpler! It would be great to just smoosh components together and have them agree between…

> HTML has collapsing margins but they seem kind of half-baked. Is there enough functionality there to be useful, or is it best avoided entirely?

Generally I'd recommend avoiding them entirely, as the rules for when margins should collapse are nuanced and sometimes applied inconsistently between browsers.

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Mod...

It just adds too much cognitive overhead to reasoning about your layouts to be worthwhile imo. Whereas with spacing components, what you see in the virtual dom is what you'll get.

Re: Layout-Isolated Components

#33

Post by spankalee »

ss3000 wrote: post #31
spankalee wrote: post #26

The usefulness of this articled is lessened because it's React-specific and React is bad with DOM and style isolation in general. The base problem here is that both a component and its host may want to style the component. The component model should account for this and offer some guidance. Web components do this with the `:host` selector that styles the component from within its shadow root. The styles applied with…

> Web components do this with the `:host` selector that styles the component from within its shadow root. The styles applied with the `:host` selector can be overridden by the outside styles, without the component needing to weaken encapsulation by allowing styling from the outside via JS properties. I don't see how the React approach of accepting styles as JS props is any weaker in terms of encapsulation compared to…

You're right. If we're talking about only the root element, it is similar to :host, because the custom element is itself stylable from the outside.

What makes me say that encapsulation is weakened is that threading JS property bags to other internal elements is also relatively common, and inline styles don't really offer any encapsulation there. Other selectors in the page can still select and style properties that are not directly styled by the element. I should have clarified that.

Shadow DOM provides true runtime style encapsulation, and the selectors on the page can't select the internal elements at all.

Re: Layout-Isolated Components

#34

Post by ss3000 »

spankalee wrote: post #33
ss3000 wrote: post #31

Earlier quoted context omitted.

> Web components do this with the `:host` selector that styles the component from within its shadow root. The styles applied with the `:host` selector can be overridden by the outside styles, without the component needing to weaken encapsulation by allowing styling from the outside via JS properties. I don't see how the React approach of accepting styles as JS props is any weaker in terms of encapsulation compared to…

You're right. If we're talking about only the root element, it is similar to :host, because the custom element is itself stylable from the outside. What makes me say that encapsulation is weakened is that threading JS property bags to other internal elements is also relatively common, and inline styles don't really offer any encapsulation there. Other selectors in the page can still select and style properties that a…

Ah I see, that makes sense. Shadow DOM definitely offers much stronger style encapsulation than a React component where you can only "enforce" that components shouldn't reach into it to style internals by convention.

Re: Layout-Isolated Components

#35

Post by andrewrothman »

I really like the idea proposed here of components. I always thought it was weird to assign a margin to elements of a list to achieve spacing. To maintain proper spacing it's often best to either make the top and bottom margins of each element equal, or remove the top/bottom margin from the first/last element. Both techniques come with complications.

Abstracting that out makes it easier to achieve a commonly used layout. Not quite sure the best way to implement this, but I'll definitely be giving the idea a shot.

https://seek-oss.github.io/braid-design-system/components/St...

https://github.com/seek-oss/braid-design-system/blob/master/...

Re: Layout-Isolated Components

#36

Post by TomMarius »

spankalee wrote: post #30
TomMarius wrote: post #28

Earlier quoted context omitted.

const MyComponent: React.FC = (props) => {props.children} I don't see any issue; additionally, it's well typed and you have fine control over it!

That's not stylable from CSS though, so you have to pass JS props and can't use selectors. It also duplicates styling strings across all similar style attributes which is not good for memory or perf.

Noone using React cares about styling from CSS though. It doesn't have to duplicate much, you can use e.g. typestyle or React Native's Stylesheet
Post reply on HN