Chrome 53: Shadow DOM v1, Payment Request API and more

Paul Kinlan
Dev Channel
Published in
2 min readSep 1, 2016

[To stay ahead of the game, subscribe to Chrome beta posts on http://blog.chromium.org/]

With Chrome 53, you can now easily create encapsulated, re-usable web components with Shadow DOM v1; mobile payments become streamlined with the Payments Request API; the Web Bluetooth API is available experimentally on some platforms as an origin trial and there’s plenty more.

Shadow DOM v1

Quick links: self-contained web components, Spec, Fancy Tabs Demo

HTML, CSS, and JavaScript are powerful development languages, but they can be difficult to maintain in large code bases. Sites that embed third-party content also need to ensure that included styles do not affect other parts of their app. Chrome 53 supports Shadow DOM V1, which allows an element to encapsulate its style and child DOM away from the main document. This improves the maintainability of large or composed sites. Shadow DOM V1 has some significant changes from the V0 version, and is broadly agreed-upon by major browser vendors. Chrome will support both versions of the API until enough developers have moved to V1. The behavior of a shadow root is determined by which API call it was created with.

Payment Request API

Quick links: Payment Request Integration Guide, Shim, Spec

Completing payments on the web can be a cumbersome process for users, leading to lower conversions on sites. While autofill has made it easier to enter information, efficient data entry on mobile is still a challenge. PaymentRequest allows for fast, seamless, and secure payments on the web using a credit card or Android Pay. It also lets users provide a billing address, shipping details, and payer information without typing. PaymentRequest is available on Chrome for Android, with support for more platforms coming soon.

Auto Play muted videos

Video is a great way for sites to reach their users, but it can be jarring when it plays unexpectedly. This is especially true on mobile, where the user may be in an environment where audio is unwanted. Chrome on Android now allows muted videos to begin playing without user interaction. If the video was marked as muted and has the autoplay attribute, Chrome will start playing the video when it becomes visible to the user. Developers can also use script to play muted videos without user interaction. Muted videos that begin playing sound before a user action will automatically be paused.

Setting the badge for notifications

Sites that send notifications to Android devices running Android 6.0 (Marshmallow) or later may now provide a badge to show in the status bar in place of the Chrome logo.

Originally posted from http://youtu.be/FajnnR-9mhE

--

--

Paul Kinlan
Dev Channel

Lead for Chrome and Web Developer Relations @ Google. Progressive Web Apps. Launched Web Fundamentals with Web Starter Kit. Mobile BadAss. Mr Web Intents.