You may not care about web components, but you’ll like what they can do for the web.
With Mozilla’s flip of a virtual switch, life got easier for the people who make websites and the people who use them, which is to say, everybody.
On Monday, Mozilla accepted an update for its Firefox browser that enables technology called web components. You probably won’t directly care about them unless you’re a programmer. But you’ll almost assuredly care about what they mean for intricate websites: fewer problems, faster loading and quicker improvements.
Google’s Chrome team started pushing web components more than five years ago. But browser makers only gradually embraced the two big pieces, called Shadow DOM and Custom Elements. Shadow DOM makes it possible to isolate chunks of code so they don’t disturb other parts of website software, while Custom Elements let programmers create their own custom website foundations.
Chrome was the first to support web components, but Apple’s Safari followed suit in 2016 and 2017. Microsoft has pledged to add support to its Edge browser but hasn’t done so yet. Firefox supports Custom Elements, but on Monday, Shadow DOM support arrived in the Nightly test version.
Web components are overkill for basic websites. But more advanced sites can benefit, however, and some big ones such as YouTube already use web components. If you visit a website with a browser that doesn’t support web components, it’ll likely be slower or limited.
“Web development got super hard,” said Mozilla Chief Product Officer Mark Mayo. “It’s now going to be a lot easier, so we should see better, faster web pages.”
Web components only work in the Nightly test version of Firefox for now, but they’re scheduled to arrive in the main version of the browser in October. They join a host of other developer-focused Firefox improvements arriving this year that Mozilla is using to try to restore its cachet with the web programmers who were instrumental to the browser’s rise a decade ago.
With web components, developers can create website building blocks and then widely reuse them without worrying they’ll cause problems that’ll stop you from actually using that website. One example: Websites often have tabs to visually represent different sections, and web components let developers more easily create that interface, reuse it on another project or even copy it from other websites that already have figured it out.
“For big companies with many teams and complex products, it’s huge,” said Alex Russell, a senior programmer at Chrome who’s worked for years to modernize the web.
Web components technology particularly helps with big libraries of pre-written software called frameworks, which are widely used in today’s web programming. Frameworks, like React from Facebook and Angular from Google, make it easier to build websites, but parts of one framework can’t be used with parts of another. As a result, programming on the web is “balkanized,” Russell said.
Mozilla’s Mayo sees it as a big step forward, too.
“It’s the basis of a safer, faster, more productive development model for the web,” Mayo said. “You don’t get all three of those being advanced at once very often.”