6 ms·

Web components may give power to developers but they take it away from users. Any page made with web components is hostile to user styling. I'm surprised Mozill

Web components may give power to developers but they take it away from users. Any page made with web components is hostile to user styling. I'm surprised Mozilla would support them.

potch 8y ago
Hello! Author here. I'm a fan of web components for widgets and embeddable third-party interfaces. I'm not as much a fan of them to wrap a site's primary content, for both accessibility and user styling reasons.
- Flenser 8y ago
  Hi! I'm not a fan of them for web apps that use excessive whitespace between repeating components[1]. Previously you could just edit the global stylesheet in dev tools but now that only changes the current component. Edit: I get the widget / embedable use case but fear that it won't just be used for that. [1] e.g. Chrome's new material design bookmarks manager that shows far less bookmarks per page than the old design.
- wilsmex 8y ago
  Great write up. Can a web component author create one in such a way that the inner shadow dom styles ARE editable/styleable by the outer or person implementing the custom component?
  - megous 8y ago
    Yeah, I have the similar need. I want to use <slot> mechanism, so I need shadow DOM, but I'd like to re-use styles, so that they don't need to be copied to each instance of the component. Aside from complicating things, it seems wasteful. It should be possible to use styles from the document's CSS to style the innards of a web component. I'm still learning, and I'm still missing solution to this. I know about var(--custom-prop), but that's limited, and still doesn't help with the waste of useless duplication of styles.
    - spirodonfl 8y ago
      What I've done is kinda standardized the solution. I've made all my elements listen for a template tag in the html page that contains <link> tags to the stylesheets I use globally. <template id="x-global-styles"> <link rel="stylesheet" href="some/sheet.css" /> </template> Kinda like that. You can use prefetch in the main header to get all your styles in one shot, before page load, if you want. Then I make my element, if the template is found, pump the innards of the template into itself so all my styles are available. I use it in conjuction with tailwind so I can write atomic classes and include my atomic css with every element I desire. From what I can tell, for the most part, my styles don't get reloaded every time. I could be wrong. They seem to get prefetched, if I use a prefetch, or loaded once, then cached. It seems that no matter how many elements I have on the page there are no external calls to get the stylesheet every time. One and done. Correct me if I'm wrong here. It's just something I fiddled around with.
      - megous 8y ago
        Very interesting! Thank you. I didn't realize you can use <link> inside web component. But it makes sense! I read some more, and I reaized that it's probably meant to be that every component has its own small piece of CSS independent of the rest, so that you can use :host, and all the other trickery and so that least amount of CSS per component needs to be parsed and processed. So I ended up writing a small pre-processor, that converts sass files into a js file with a variables containing styles for each component (like BUTTON_CSS, DIALOG_CSS, SPLIT_LAYOUT_CSS). I just hope that there's some optimization in the browser, such that when the same <style> content is used in multiple instances of the component, it is parsed/processed only once and the results cached for the other instances.
  - KwanEsq 8y ago
    Not currently, but in future Shadow Parts [1] will enable this [1] https://drafts.csswg.org/css-shadow-parts/ https://drafts.csswg.org/css-shadow-parts/
    - spankalee 8y ago
      Note: ::part() is currently behind a flag in Chrome.
peterhunt 8y ago
Weren’t user stylesheets removed from [1] / never present in most browsers? [1] https://src.chromium.org/viewvc/chrome?revision=234007&view=revision https://src.chromium.org/viewvc/chrome?revision=234007&view=...
- Flenser 8y ago
  I use GreaseMonkey/TamperMonkey, but WebComponent even make modifying a page using dev tools hard. Edit: e.g for printing or to make reading / using easier.
- srgpqt 8y ago
  They are still in Firefox, but hidden from the user.
  - lowercased 8y ago
    there seems to be something in mac safari for 'stylesheet' loading under 'advanced' preferences. if the browsers don't give people tools to edit/manage from within the browsers, even the average tech-savvy user won't bother with these, which is a bit of a shame.
blacksmith_tb 8y ago
It seems like the * CSS selector would still apply to these new elements? And in js things like el.children? I wonder if user styles via something like Stylus[1] could style them also? Now that I think about it, it seems like some of the worst (and most likely) applications will be advertising (to try and avoid blockers). 1: https://addons.mozilla.org/en-US/firefox/addon/styl-us/ https://addons.mozilla.org/en-US/firefox/addon/styl-us/
ravenstine 8y ago
How many users apply their own style sheets? I remember this was popular among a relatively few people, and now I don't know anyone who uses things like Stylish or Greasemonkey/Tampermonkey anymore.
- wwweston 8y ago
  User applied stylesheets are fairly uncommon, but then again, so is using a screen reader. Both are essentially a kind of accessibility tech, and when it comes to accessibility questions, the chief concern isn't necessarily whether everyone uses it. It's probably worth noting that reader-mode -- another accessibility tech -- does seem to be fairly popular.
  - someone7x 8y ago
    > and when it comes to accessibility questions, the chief concern isn't necessarily whether everyone uses it. I wish more developers had your perspective. My Dad uses Windows' high contrast mode. It's less that "literal dozens" use this feature and more that this feature transforms all that desktop-shaped-material into a computer for the vision impaired. Isn't the biggest performance enhancement the transition from not-working to working? I view accessibility as the ultimate performance enhancement for a given slice of users.
    - TeMPOraL 8y ago
      Some companies care. Most don't. Unless a feature is used by double-digit percentage of users, it'll be axed. It's a sad reality of today, and no, I don't buy the arguments about saving development time, not when said by the same people who also say they want to deliver value to users (as opposed to extract value from them). Because somehow, feature cancellation always seems to touch the features that enable users to unbreak things or optimize their experience.
      - zeroname 8y ago
        Delivering value to only 0.1% of users is equal to taking away value from the other 99.9% of users. You're not strictly saving development time, you're reallocating it to better utility. Now, if those 0.1% of users have some sort of legitimate accessibility issue, we can talk about it. If they just have highly idiosyncratic preferences about their user experience, the axe it shall be.
megous 8y ago
OTOH for me (another freakish web user who does unusual things with the web), web components may make it easier to scrape the website. Developers will be passing data into a component in some way, JSON atrtribute, or a nicely defined data in a property, so it will be easier to scrape and understand via devtools DOM insepctor. Insteaed of a soup of deeply nested divs, there will be nicer and more meaningful structure of web components.
- jazzyjackson 8y ago
  The move to single page apps have definitely surfaced a lot of JSON-speaking api endpoints that make scraping for data a thing of the past. A great thing for the web, I think, whether or not the site owners are aware!
megous 8y ago
You can still probably override attachShadow to ignore the argument, and make shadowRoot always open and then use that to modify the <style> inside shadowRoot. More complicated, but probably doable (with greasemonkey).
rictic 8y ago
The last time I looked into it, user agents may support the '>>>' combinator for cases like user styling, where the user should trump the page content.
simplify 8y ago
If web components will be built-in, I imagine it's possible for browsers to provide a way to style them in user-land.

Web components may give power to developers but they take it away from users. Any page made with web components is hostile to user styling. I'm surprised Mozilla would support them.

potch 8y ago

Hello! Author here. I'm a fan of web components for widgets and embeddable third-party interfaces. I'm not as much a fan of them to wrap a site's primary content, for both accessibility and user styling reasons.

Flenser 8y ago
Hi! I'm not a fan of them for web apps that use excessive whitespace between repeating components[1]. Previously you could just edit the global stylesheet in dev tools but now that only changes the current component. Edit: I get the widget / embedable use case but fear that it won't just be used for that. [1] e.g. Chrome's new material design bookmarks manager that shows far less bookmarks per page than the old design.
wilsmex 8y ago
Great write up. Can a web component author create one in such a way that the inner shadow dom styles ARE editable/styleable by the outer or person implementing the custom component?
- megous 8y ago
  Yeah, I have the similar need. I want to use <slot> mechanism, so I need shadow DOM, but I'd like to re-use styles, so that they don't need to be copied to each instance of the component. Aside from complicating things, it seems wasteful. It should be possible to use styles from the document's CSS to style the innards of a web component. I'm still learning, and I'm still missing solution to this. I know about var(--custom-prop), but that's limited, and still doesn't help with the waste of useless duplication of styles.
  - spirodonfl 8y ago
    What I've done is kinda standardized the solution. I've made all my elements listen for a template tag in the html page that contains <link> tags to the stylesheets I use globally. <template id="x-global-styles"> <link rel="stylesheet" href="some/sheet.css" /> </template> Kinda like that. You can use prefetch in the main header to get all your styles in one shot, before page load, if you want. Then I make my element, if the template is found, pump the innards of the template into itself so all my styles are available. I use it in conjuction with tailwind so I can write atomic classes and include my atomic css with every element I desire. From what I can tell, for the most part, my styles don't get reloaded every time. I could be wrong. They seem to get prefetched, if I use a prefetch, or loaded once, then cached. It seems that no matter how many elements I have on the page there are no external calls to get the stylesheet every time. One and done. Correct me if I'm wrong here. It's just something I fiddled around with.
    - megous 8y ago
      Very interesting! Thank you. I didn't realize you can use <link> inside web component. But it makes sense! I read some more, and I reaized that it's probably meant to be that every component has its own small piece of CSS independent of the rest, so that you can use :host, and all the other trickery and so that least amount of CSS per component needs to be parsed and processed. So I ended up writing a small pre-processor, that converts sass files into a js file with a variables containing styles for each component (like BUTTON_CSS, DIALOG_CSS, SPLIT_LAYOUT_CSS). I just hope that there's some optimization in the browser, such that when the same <style> content is used in multiple instances of the component, it is parsed/processed only once and the results cached for the other instances.
- KwanEsq 8y ago
  Not currently, but in future Shadow Parts [1] will enable this [1] https://drafts.csswg.org/css-shadow-parts/ https://drafts.csswg.org/css-shadow-parts/
  - spankalee 8y ago
    Note: ::part() is currently behind a flag in Chrome.

peterhunt 8y ago

Weren’t user stylesheets removed from [1] / never present in most browsers? [1] https://src.chromium.org/viewvc/chrome?revision=234007&view=revision https://src.chromium.org/viewvc/chrome?revision=234007&view=...

Flenser 8y ago
I use GreaseMonkey/TamperMonkey, but WebComponent even make modifying a page using dev tools hard. Edit: e.g for printing or to make reading / using easier.
srgpqt 8y ago
They are still in Firefox, but hidden from the user.
- lowercased 8y ago
  there seems to be something in mac safari for 'stylesheet' loading under 'advanced' preferences. if the browsers don't give people tools to edit/manage from within the browsers, even the average tech-savvy user won't bother with these, which is a bit of a shame.

blacksmith_tb 8y ago

It seems like the * CSS selector would still apply to these new elements? And in js things like el.children? I wonder if user styles via something like Stylus[1] could style them also? Now that I think about it, it seems like some of the worst (and most likely) applications will be advertising (to try and avoid blockers). 1: https://addons.mozilla.org/en-US/firefox/addon/styl-us/ https://addons.mozilla.org/en-US/firefox/addon/styl-us/

ravenstine 8y ago

How many users apply their own style sheets? I remember this was popular among a relatively few people, and now I don't know anyone who uses things like Stylish or Greasemonkey/Tampermonkey anymore.

wwweston 8y ago
User applied stylesheets are fairly uncommon, but then again, so is using a screen reader. Both are essentially a kind of accessibility tech, and when it comes to accessibility questions, the chief concern isn't necessarily whether everyone uses it. It's probably worth noting that reader-mode -- another accessibility tech -- does seem to be fairly popular.
- someone7x 8y ago
  > and when it comes to accessibility questions, the chief concern isn't necessarily whether everyone uses it. I wish more developers had your perspective. My Dad uses Windows' high contrast mode. It's less that "literal dozens" use this feature and more that this feature transforms all that desktop-shaped-material into a computer for the vision impaired. Isn't the biggest performance enhancement the transition from not-working to working? I view accessibility as the ultimate performance enhancement for a given slice of users.
  - TeMPOraL 8y ago
    Some companies care. Most don't. Unless a feature is used by double-digit percentage of users, it'll be axed. It's a sad reality of today, and no, I don't buy the arguments about saving development time, not when said by the same people who also say they want to deliver value to users (as opposed to extract value from them). Because somehow, feature cancellation always seems to touch the features that enable users to unbreak things or optimize their experience.
    - zeroname 8y ago
      Delivering value to only 0.1% of users is equal to taking away value from the other 99.9% of users. You're not strictly saving development time, you're reallocating it to better utility. Now, if those 0.1% of users have some sort of legitimate accessibility issue, we can talk about it. If they just have highly idiosyncratic preferences about their user experience, the axe it shall be.

megous 8y ago

OTOH for me (another freakish web user who does unusual things with the web), web components may make it easier to scrape the website. Developers will be passing data into a component in some way, JSON atrtribute, or a nicely defined data in a property, so it will be easier to scrape and understand via devtools DOM insepctor. Insteaed of a soup of deeply nested divs, there will be nicer and more meaningful structure of web components.

jazzyjackson 8y ago
The move to single page apps have definitely surfaced a lot of JSON-speaking api endpoints that make scraping for data a thing of the past. A great thing for the web, I think, whether or not the site owners are aware!

megous 8y ago

You can still probably override attachShadow to ignore the argument, and make shadowRoot always open and then use that to modify the <style> inside shadowRoot. More complicated, but probably doable (with greasemonkey).

rictic 8y ago

The last time I looked into it, user agents may support the '>>>' combinator for cases like user styling, where the user should trump the page content.

simplify 8y ago

If web components will be built-in, I imagine it's possible for browsers to provide a way to style them in user-land.