WHATWG HTML Standard
webcomponents
Our great sponsors
WHATWG HTML Standard | webcomponents | |
---|---|---|
136 | 34 | |
7,606 | 4,302 | |
2.1% | 0.7% | |
9.4 | 4.4 | |
6 days ago | about 1 month ago | |
HTML | HTML | |
GNU General Public License v3.0 or later | GNU General Public License v3.0 or later |
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.
WHATWG HTML Standard
-
Streaming HTML out of order without JavaScript
There's a long-standing WHATWG feature request open for it here: https://github.com/whatwg/html/issues/2791
And several userland custom element implementation, like https://www.npmjs.com/package//html-include-element
One of the cool things that you can do with client-side includes and shadow DOM is render the included HTML into a shadow root that has s, so that the child content of the include element is slotted into a shell implemented by the included HTML.
This lets you do things like have the main page be the pre-page content and the included HTML be a heavily cached site-wide shell, and then another per-user include with personalized HTML - all cached appropriately.
-
An HTML Switch Control
As mentioned by others, OK idea, but not a fan that this isn't standardized. After a quick search+peruse, these seem to indicate that it's not around the corner either. Happy (/hope) to be corrected.
-
YouTube video embedding harm reduction
The `allow` attribute on iframes is a relatively recent API addition from 2017
-
Htmz – a low power tool for HTML
I think there's a pretty strong argument at this point for this kind of replacing DOM with a response behavior being part of the platform.
I think the first step would be an element that lets you load external content into the page declaratively. There's a spec issue open for this: https://github.com/whatwg/html/issues/2791
And my custom element implementation of the idea: https://www.npmjs.com/package/html-include-element
Then HTML could support these elements being targets of links.
-
The Ladybird Browser Project
> Consider https://www.ietf.org/rfc/rfc1866.txt vs https://html.spec.whatwg.org/multipage/
I thought, oh, that's not so bad. Then I realized what I was looking at was a 10 page index.
> if we're finally seeing fruits of browsers being better standardized on "95%"+ of the popular features -- and if writing a browser today is in fact easier than both writing AND maintaining a browser a decade back.
A decade back, maybe... but decades ago the number of things you had to support was just so much smaller even if you only look at HTML! Consider https://www.ietf.org/rfc/rfc1866.txt vs https://html.spec.whatwg.org/multipage/
-
Is Htmx Just Another JavaScript Framework?
I'd love to see something like HTMX get standardized, but I'm extremely pessimistic for HTMX's prospects for standardization in HTML.
In talking to a few standards folks about it, they've all said, "oh, yeah, you want declarative AJAX; people have tried and failed to get that standardized for years." Even just trying to get
to target a section of the page that isn't an has been argued about and hashed out for years.<p>Why is that? Well, for example, here's the form you have to fill out to start standardizing a front-end feature. <a href="https://github.com/whatwg/html/issues/new?assignees=&labels=addition%2Fproposal%2Cneeds+implementer+interest&projects=&template=1-new-feature.yml">https://github.com/whatwg/html/issues/new?assignees=&labels=...</a><p>It asks three main questions:<p>* What problem are you trying to solve? -
New in Chrome 120 back button detection
The issue with a single global event handler is discussed here: https://github.com/WICG/close-watcher#a-single-event
If you use popover="", you get the kind of functionality you're discussing for free. For
, the discussion is in progress and reaching a conclusion: https://github.com/whatwg/html/issues/9373 -
HTML Web Components: An Example
Do you mean like Declarative Shadom Dom?
webcomponents
-
Web Components Eliminate JavaScript Framework Lock-In
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... )
- Scoped styling (Shadow DOM + User defined stylesheets + CSS parts)
It is definitively not a templating engine. It doesn't provide any new APIs for creating DOM nodes, or mutating them a la React or handlebars or lit-html. Templating is basically the "next step up the stack". Using shadowDom.innerHTML = `...`; is basically a stand-in for having an actual templating engine.
There is work going on, developing a native templating system in the browser which may interest you. It's called the DOM Parts proposal and you can find info on it here: https://github.com/WICG/webcomponents/blob/gh-pages/proposal...
-
HTML Web Components
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>
-
Lit 3 Release Announcement
https://github.com/WICG/webcomponents/issues/814
I also find baffling that there is _zero_ information about forms in the Lit3.0 documentation.
Example:
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
-
Things you forgot because of React
))
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 fact that React is ten years old and doesn't support Web Components still, goes to show just how little the React team cares about Web Standards .
No one cares about web components, including people who originally where really bullish on them (Vue, Svelte, Solid). React supports web components just as it supports anything that attaches itself to the DOM, and that is more than enough for the vast majority of use cases.
Meanwhile, if Web Components were any good they wouldn't need another 20 specs just to barely patch holes in their design: https://w3c.github.io/webcomponents-cg/2022.html or still have unresolved issues like "custom button in shadow dom cannot submit a form": https://github.com/WICG/webcomponents/issues/814
> but at least jQuery helped shape modern standards. Has anything good come from React for the platform?
It could have, if the people behind web components listened to anyone except themselves.
-
Building a Front End Framework; Reactivity, Composability with No Dependencies
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.
-
I am experimenting with Typescript. Is this way of defining a constructor considered normal or an abomination?
It's more than just sugar now. You can't even write web components functionally: https://github.com/WICG/webcomponents/issues/587
-
Declarative Shadow DOM
Does this mean we'll finally get Template-Instantiation[0], providing a native way to do HTML templates in the browser?
There's been a bunch of hand waving that the reason we still don't have this is because they needed a solution for encapsulation and a solution for SSR. Now we have both. Can we please finally deliver on something people have been asking for since the mid 2000s?
[0]: https://github.com/WICG/webcomponents/blob/gh-pages/proposal...
What are some alternatives?
stencil - A toolchain for building scalable, enterprise-ready component systems on top of TypeScript and Web Component standards. Stencil components can be distributed natively to React, Angular, Vue, and traditional web developers from a single, framework-agnostic codebase.
caniuse - Raw browser/feature support data from caniuse.com
WebKit - Home of the WebKit project, the browser engine used by Safari, Mail, App Store and many other applications on macOS, iOS and Linux.
Retroactive - Retroactive only receives limited support. Run Aperture, iPhoto, and iTunes on macOS Sonoma, macOS Ventura, macOS Monterey, macOS Big Sur, and macOS Catalina. Xcode 11.7 on macOS Mojave. Final Cut Pro 7, Logic Pro 9, and iWork ’09 on macOS Mojave or macOS High Sierra.
standards-positions
browser
exploits
breaking-changes-web - 💢 A list of breaking changes to the web platform
serenity - The Serenity Operating System 🐞
TypeScript - TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
EventSource - a polyfill for http://www.w3.org/TR/eventsource/
awesome-selfhosted - A list of Free Software network services and web applications which can be hosted on your own servers