Prefixed support for Shadow DOM
Web Components is a set of cutting edge standards that will make it possible to build reusable widgets for the web. Shadow DOM is a key part of Web Components that enables DOM tree encapsulation. Without it, widgets may inadvertently break pages by using conflicting CSS selectors, class or id names, or JavaScript variables.

To get started, try the prefixed webkitCreateShadowRoot API available in today’s Beta release. Here’s an example from the HTML5 Rocks Shadow DOM Tutorial:

We think Shadow DOM is an important step forward for the web, so we've submitted a comprehensive test suite to the W3C to help ensure compatibility between implementations.

Other platform features
In addition to the highlights above, today’s Beta release introduces various other web platform features:

• The JavaScript Web Speech API enables speech-to-text on the desktop web. Check out this cool tutorial and demo to learn how to add speech to your webpages.
• For speed junkies, the Resource Timing API exposes detailed timing information to JavaScript about subresources loaded by the page, and the User Timing API provides access to high-precision timestamps to help measure web app performance.
• Chromium's IndexedDB implementation now supports concurrent transactions. Some web apps may inadvertently rely on sequential transactions, so be sure to test yours in today’s Beta.
• Various IndexedDB features have been updated to match the spec: setVersion has been replaced with the new upgradeneeded API, and a few old constants have been removed.
• The Web Audio API now exposes an OfflineAudioContext constructor, and a few AudioContext method names have been updated to match the latest spec. Note that Chrome for Android doesn’t support the Web Audio API yet.
• The ::cue pseudo-element lets you style WebVTT cues such as HTML5 video subtitles.

Last week’s Beta release of Chrome for Android also brought many features already available on other Chrome versions to Android as well. These features are described in detail in the announcement on the Chromium blog.

DevTools
Chrome Developer Tools help you debug the web. We’re rolling out several updates to desktop DevTools in today’s Beta release:

• console.clear() helps keep your console clean.
• The top toolbar is icon-free, though icons can be re-enabled in settings.
• A timeline setting was added: “Show CPU activity on the ruler.” console.log formatting accepts multiple styles. For example: console.log("%cblue! %cgreen!", "color: blue;", "color: green;").
• The docking toggle switches between most recent modes; “Dock to Right” is now the default alternative.
• Emulate the media type to view print stylesheets and @media blocks.
• The CodeMirror editor, replacing the default DevTools editor in Sources Panel, was updated to v3.

Stay in the loop

Visit chromestatus.com for a complete overview of Chrome’s developer features, and circle +Google Chrome Developers for more frequent updates.

We’ll update this post if things change, but at this point all these features are expected to land in the next Stable release. We’ve got a lot more in store for you this year, so get coding!

Posted by Eric Bidelman, Chrome Developer Advocate and Web Platform Enthusiast