Ancestors

Toot

Written by alan :blobfoxheadphones: on 2025-01-17 at 14:02

I've been playing with a way to make styling web components easier. The idea is to send variable names to components that they can use to pull in a page's styles. Details here if you're interested:

https://web-component-techniques.alanwsmith.com/pages/handling-styles/

[#]WebComponents #WebDev #IndieWeb

=> More informations about this toot | More toots from TheIdOfAlan@hachyderm.io

Descendants

Written by Nathan Knowler on 2025-01-17 at 14:30

@TheIdOfAlan w/r/t the document’s styles overriding the :host — think about it this way: custom elements are more like creating a custom element for HTML itself than creating a app/page-level component. Your shadow styles for :host are like its user-agent styles. The user agent styles for any built-in element are just as weak as the :host shadow styles for an element from the perspective of the document (e.g. what happens if you set document-level styles that modify any built-in element’s display property? It easily override them). https://knowler.dev/blog/a-mental-model-for-styling-the-shadow-dom

=> More informations about this toot | More toots from knowler@sunny.garden

Written by Nathan Knowler on 2025-01-17 at 14:33

@TheIdOfAlan On the note of using attributes, I recommend keeping your attributes weak (more like “presentational hints”) and not the only way to style your elements. Otherwise, you risk requiring JS to update the element’s styles, since you can’t change attributes with CSS.

=> More informations about this toot | More toots from knowler@sunny.garden

Written by alan :blobfoxheadphones: on 2025-01-17 at 15:25

@knowler thanks for the notes! I've got some good feedback from some other folks as well that I'll be using to update the post. I've thrown a TODO list at the bottom in the mean time and included your post as part of the review.

Thanks again for the note :blobfoxheadphones:

=> More informations about this toot | More toots from TheIdOfAlan@hachyderm.io

Written by alan :blobfoxheadphones: on 2025-01-17 at 15:26

@knowler p.s. possible typo in "If there’s only one ways an affordance can be visually communicated"

Feels like maybe it should be: "If there’s only one way an affordance..."

=> More informations about this toot | More toots from TheIdOfAlan@hachyderm.io

Written by The Other Brook on 2025-01-17 at 16:27

@TheIdOfAlan As an Old who doesn't do front end web dev anymore largely because progressive enhancement went out of fashion and slopping JS all over things it didn't need to touch became the all-consuming fad, I have to ask why you don't "feel right" about letting the file that's supposed to handle styling the HTML style the HTML.

=> More informations about this toot | More toots from theotherbrook@sunny.garden

Written by alan :blobfoxheadphones: on 2025-01-18 at 05:58

@theotherbrook depending on what you mean, we may be on the same page. I lean towards doing all the positional styling in the components themselves. The main thing I was after was the ability to pass in variables to use for colors.

For example, this github stars one where you can decide what colors to use via the attributes: https://github-stars.alanwsmith.com/

=> More informations about this toot | More toots from TheIdOfAlan@hachyderm.io