Google's Chrome 53 Beta brings support for Shadow DOM V1, as well as the PaymentRequest API.
A significant improvement from the earlier V0 version, among Shadow DOM V1's upgrades are deprecation of multiple shadow roots, and a closed shadow root where a closed mode is designed to disallow any access to a node in a closed shadow root from an outside world.
In a blog post announcing its release, Hayato Ito highlighted how while HTML, CSS, and JavaScript are useful and powerful languages, they can be difficult to maintain in large code bases.
V1 "allows an element to encapsulate its style and child DOM away from the main document. This improves the maintainability of large or composed sites," Ito said. It should be noted that Chrome will continue to support V0.
In the HackerNews discussion around Google's Chrome 53 Beta, user borplk asked "Does Shadow DOM have any significance on other things like React? (for example performance gains or similar?)"
Google engineer Eric Bidelman replied:
In using shadow DOM, one thing that's become clear is that it is a developer productivity tool (built in the browser).
With React, you have to use inline styles (https://facebook.github.io/react/tips/inline-styles.html) or a build tool to modularize/prefix CSS selectors (e.g.. CSS Modules). Inline styles can muck with specificity and tons of inline styles can actually force the browser to do more context switching than necessary (HTML parser <-> CSS parser). Mind you, the latter is unlikely to actually be a perf issue in a real app.
In shadow DOM, you just write CSS. Write simple selectors in a `<style>` or a stylesheet, the browser automagically scopes the selectors to the component, no tools required. Shadow roots also prevent outer styles from cross the boundary and leaking in. That one is particularly tricky without help from the browser.
The 53 Beta release also introduces the new Payment Request API, that Ito says allows for fast and secure payments using a credit card or Android Pay, and lets users provide a billing address, shipping details, and payer information without typing.
The API is explained in the W3C Working Draft:
A web page creates a PaymentRequest to make a payment request. This is typically associated with the user initiating a payment process (e.g.., selecting a "Power Up" in an interactive game, pulling up to an automated kiosk in a parking structure, or activating a "Buy", "Purchase", or "Checkout" button). The PaymentRequest allows the web page to exchange information with the user agent while the user is providing input before approving or denying a payment request.
Google provide a demo video, seen below:
Almost hidden among some of the smaller updates to the 53 Beta is the Web Bluetooth API origin trial. The Web Bluetooth API works by prompting user with a device chooser when a website requests access to nearby devices using navigator.bluetooth.requestDevice.
Some of the deprecations in Chrome's 53 Beta are:
- HTTP/0.9 has been deprecated in favor of HTTP/1.0, which adds response header support.
- TLS Diffie-Hellman ciphers have been removed, following their deprecation in M51.
- The
TextEncoderAPI no longer accepts arguments and will instead always encode using utf-8. - New certificates issued by Symantec Corporation or by CAs that chain to Symantec Corporation will no longer be trusted in Chrome unless accompanied with Certificate Transparency information.