webcomponents VS design-reviews

It's not all that shiny. Web components have global names (you should pretty much apply a prefix/namespace if you want to work with others) and managing multiple version of the same component in the same page is an issue in any non trivial codebase (either use a different name per version or fix all breaking changes at once during the upgrade, unless the draft about scoping web elements became standard https://github.com/WICG/webcomponents/blob/gh-pages/proposal... )

I've recently just started playing with Web Components without a build environment. Meaning, no npm, no bun, no webpack, etc, and no dependencies; in typescript. Intellij can autocompile down to js and the browser view injects a small onchange handler for live updates when developing. So far no problems.

The only thing holding web components back seems to be HTML Modules; being able to link to a .html file instead of a .js file to import a web component. Because of this if you want to use templates or anything more complicated you need to do the ugly inject of .innerHtml = `...`, which I thought would be a problem but the IDE parses the template string very nicely. It would be great to make a component in HTML and any javascript you would put in a tag. It seems like there a lot of bureaucracy involved in getting HTML Modules out the door since its been eight years.<p><a href="https://github.com/WICG/webcomponents/blob/gh-pages/proposals/html-modules-explainer.md#high-level-summary">https://github.com/WICG/webcomponents/blob/gh-pages/proposal...</a>

We're trying to advocate for greater flexibility in cross-component styling. One proposal is "open styleable shadow-roots" which would be an opt-in to let styles from above a component to apply to it's shadow root. I think this would help migration in situations where app teams are currently using global stylesheets.

Feedback and support of the need for something like this would help a lot: https://github.com/WICG/webcomponents/issues/909

))

Part 1.

> I honestly believe that 90% of the dislike for WC comes from the name "connectedCallback". If they'd named it "onCreate" or something, everyone would be using it

Of course not. None of the criticism towards Web Components ever mentions "connectedCallback", or how it should be named differently.

Do you know the actual reason so few are using them? Let's skip the atrocious not-really-high-level not-really-low-level imperative API that they offer.

How about:

- 13 years after introduction they still need 20 more specs to try and patch just some of the holes in their original design: https://w3c.github.io/webcomponents-cg/2022.html

- Shadow DOM is infecting every spec so that the actual useful specs like Scoped CSS have to be delayed almost indefinitely to try and figure out how to work with this abomination of a design

To quote the report linked above, "many of these pain points are directly related to Shadow DOM's encapsulation"

- The amount of specs that are required to make them work, barely, and be "good web citizens". And the amount of APIs.

Oh, you want your custom input to a) be able to send its data in a form, and b) be accessible to a label outside of your component? Well, there's a separate API for a) and there's some separate future API for b). And meanwhile your custom button won't be able to submit your form, sorry, it's a 4-year old issue with no solution: https://github.com/WICG/webcomponents/issues/814

And all that despite the fact that there are already a dozen specs covering web components, and dozens more on their way.

- Web Components ar HTMLElement. It means you cannot use them inside SVGs.

This is impossible:

The lit-plugin in for VS Code offers syntax highlighting, jumpt-to-definition, etc: https://marketplace.visualstudio.com/items?itemName=runem.li...

Prettier already supports HTML in html`` strings, likewise, CSS.

> Is there a way in Lit to write the templates in regular HTML rather than a string?

This would require a compiler. You would need to load the HTML into the JS module graph and JS can't do that yet, though there is a proposal for it: https://github.com/WICG/webcomponents/blob/gh-pages/proposal...

Template in HTML also have the problem of the data not being in scope as it is in JS, and there not being an expression language. So you ned up having to re-implement a lot of JS embedded into the HTML syntax, which then preferences a compiler-based approach to make fast. It turns out to be a lot simpler to embed HTML in JS.

It's more than just sugar now. You can't even write web components functionally: https://github.com/WICG/webcomponents/issues/587

gzip/brotli handles this very well, but it still is text to parse through.

Some form of declarative CSS module scripts would help a lot. A feature request for that here: https://github.com/WICG/webcomponents/issues/939

In the past I've seen this one:

https://github.com/WICG/webcomponents/blob/gh-pages/proposal...

Perhaps there are more recent versions.

I liked the spirit of the proposal, but never studied it.

> The other value of pretty specifically addresses preventing orphans and can be more broadly applied. The algorithm behind pretty will evaluate the last four lines in a text block to work out adjustments as needed to ensure the last line has two or more words.

This is very, very badly wrong. `text-wrap-style: pretty` is explicitly not about orphans and does not have a defined algorithm. It’s about prettiness, a subjective thing that will have different interpretations in different browsers and over time, and this is extremely deliberate. What the author has described is what Chromium has implemented at this time.

All the spec says is <https://www.w3.org/TR/css-text-4/#valdef-text-wrap-style-pre...>, that `text-wrap-style: pretty` “Specifies the UA should bias for better layout over speed, and is expected to consider multiple lines, when making break decisions. Otherwise equivalent to auto”.

TAG review of the feature requested that implementers use at least two heuristics, “to avoid authors using it as a proxy for a more specific thing” <https://github.com/w3ctag/design-reviews/issues/864#issuecom...>.

For total clarity: ‘pretty’ is not necessarily any different from ‘auto’, and ‘auto’ is permitted to do exactly the same thing as ‘pretty’ does, and I hope and expect that browser makers will eventually go that direction for most contexts (contenteditable/ being the main exception, and maybe lower-powered platforms). If you explicitly want a greedy/first-fit technique, use `text-wrap: stable`. Firefox has had a bug open for 13 years where shifting in this direction and using Knuth–Plass almost everywhere has been seriously contemplated <<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=630181" rel="nofollow">https://bugzilla.mozilla.org/show_bug.cgi?id=630181</a>>, long before text-wrap-style.

CSS specs are explicitly not interested in prescribing TeX-level control; text-wrap-style is a good example of this: it’s just hints, with the actual algorithms completely UA-defined. And in fact, they’re going out of their way to recommend including multiple distinct heuristics of prettiness, so that developers don’t use it as a proxy for just one thing and start relying on something that is explicitly and deliberately undefined. <https://github.com/w3ctag/design-reviews/issues/864#issuecom...> (And Chromium has done just this: <https://bugs.chromium.org/p/chromium/issues/detail?id=143279...>.)

In other words: you’ve already lost!

Since people seemed to believing Google PR at face value here is the w3c position in rejecting the proposal:

The intention of the Topics API is to enable high level interests of web users to be shared with third parties in a privacy-preserving way in order to enable targeted advertising, while also protecting users from unwanted tracking and profiling. The TAG's initial view is that this API does not achieve these goals as specified.

The Topics API as proposed puts the browser in a position of sharing information about the user, derived from their browsing history, with any site that can call the API. This is done in such a way that the user has no fine-grained control over what is revealed, and in what context, or to which parties. It also seems likely that a user would struggle to understand what is even happening; data is gathered and sent behind the scenes, quite opaquely. This goes against the principle of enhancing the user's control, and we believe is not appropriate behaviour for any software purporting to be an agent of a web user.

The responses to the proposal from Webkit and Mozilla highlight the tradeoffs between serving a diverse global population, and adequately protecting the identities of individuals in a given population. Shortcomings on neither side of these tradeoffs are acceptable for web platform technologies.

It's also clear from the positions shared by Mozilla and Webkit that there is a lack of multi-stakeholder support. We remain concerned about fragmentation of the user experience if the Topics API is implemented in a limited number of browsers, and sites that wish to use it prevent access to users of browsers without it (a different scenario from the user having disabled it in settings).

We are particularly concerned by the opportunities for sites to use additional data gathered over time by the Topics API in conjunction with other data gathered about a site visitor, either via other APIs, via out of band means, and/or via existing tracking technologies in place at the same time, such as fingerprinting.

We appreciate the in-depth privacy analyses of the API that have been done so far by Google and by Mozilla. If work on this API is to proceed, it would benefit from further analysis by one or more independant (non-browser engine or adtech) parties.

Further, if the API were both effective and privacy-preserving, it could nonetheless be used to customise content in a discriminatory manner, using stereotypes, inferences or assumptions based on the topics revealed (eg. a topic could be used - accurately or not - to infer a protected characteristic, which is thereby used in selecting an advert to show). Relatedly, there is no binary assessment that can be made over whether a topic is "sensitive" or not. This can vary depending on context, the circumstances of the person it relates to, as well as change over time for the same person.

Giving the web user access to browser settings to configure which topics can be observed and sent, and from/to which parties, would be a necessary addition to an API such as this, and go some way towards restoring agency of the user, but is by no means sufficient. People can become vulnerable in ways they do not expect, and without notice. People cannot be expected to have a full understanding of every possible topic in the taxonomy as it relates to their personal circumstances, nor of the immediate or knock-on effects of sharing this data with sites and advertisers, and nor can they be expected to continually revise their browser settings as their personal or global circumstances change.

A portion of topics returned by the API are proposed to be randomised, in part to enable plausible deniability of the results. The usefulness of this mitigation may be limited in practice; an individual who wants to explain away an inappropriate ad served on a shared computer cannot be expected to understand the low level workings of a specific browser API in a contentious, dangerous or embarrassing situation (assuming a general cultural awareness of the idea of targeted ads being served based on your online activities or even being "listened to" by your devices, which does not exist everywhere, but is certainly pervasive in some places/communities).

While we appreciate the efforts that have gone into this proposal aiming to iteratively improve the privacy-preserving possibilities of targeted advertising, ultimately it falls short. In summary, the proposed API appears to maintain the status quo of inappropriate surveillence on the web, and we do not want to see it proceed further.

https://github.com/w3ctag/design-reviews/issues/726#issuecom...

Ah, I didn't realize this wasn't solved -- a quick search turns up:

- https://github.com/WICG/webcomponents/issues/788

- https://github.com/w3c/DOM-Parsing/issues/58

- https://github.com/w3ctag/design-reviews/issues/494

- https://web.dev/declarative-shadow-dom

In pre-render they seem to have started in this direction extremely recently:

https://github.com/prerender/prerender/pull/731/files

I don't use prerender so I can't definitively speak to it being solved and hiccup-free, but I think that limitation is going to go away in the future.

There was a ton of work across browser vendors to make this a part of spec:

https://html.spec.whatwg.org/multipage/canvas.html#the-canva...

It's all there. It's all official. That github page was just one part of reaching consensus. There's also TAG review:

https://github.com/w3ctag/design-reviews/issues/627

FWIW Mozilla and Safari signed off on all of these changes at some point in time somewhere, hence why it's allowed to be part of spec. There were some changes that were not allowed to be part of the new API because one of those two said no (like perspective transforms, conic curves).

I would like to quote from the W3C TAG comments on the Managed Device Web API:

https://github.com/w3ctag/design-reviews/issues/606#issuecom...

> > "NOTE: [RFC7258] treats pervasive monitoring as an attack, but it doesn’t apply to managed devices."

> We don't think this is adequate. Given the power dynamics at play in an employer-employee relationship, the UA should still be working in the best interests of the end-user (the employee) even if the device being used is managed by an administrator. That is to say, pervasive monitoring is never a feature.

Chrome may not consider it part of the "web-exposed platform", since the code doesn't live in blink/, but the same logic applies to view-source. The needs of the users are more important than the security theatre you wish to put on for their teacher's benefit.

One case directly related to Chrome browser, and sending data to Google, there is issue with tracking headers. [source](https://github.com/w3ctag/design-reviews/issues/467#issuecomment-581944600)This allows tracking specific Chrome instance among all Google services.We cannot say whether this is used for tracking, but it allows it for sure.\[Register article about the same matter.\]([https://forums.theregister.com/forum/all/2020/02/05/google\_chrome\_id\_numbers/](https://forums.theregister.com/forum/all/2020/02/05/google_chrome_id_numbers/))