Home Start Get started Build an element 1. Get set up 2. Add local DOM 3. Data binding & properties 4. React to input 5. Theming with custom properties Build an app 1. Get set up 2. Create a new page 3. Add some elements 4. Deploy Polymer Feature overview Quick tour Define elements Register an element Declare properties Instance methods Behaviors Local DOM & styling Local DOM Styling Events Handle and fire events Gesture events Data system Data system concepts Work with object and array data Observers and computed properties Data binding Helper elements Tools Tools overview Polymer CLI Document your elements Test your elements Optimize for production Publish an element Advanced tools Services What's new Release notes 1.0 Migration guide About Polymer 1.0 Resources Community Browser compatibility API Reference Polymer.Base array-selector custom-style dom-bind dom-if dom-repeat dom-template Polymer.Templatizer Global settings App Toolbox What's in the box? Using the Toolbox App templates Responsive app layout Routing Localization App storage Service worker Serve your app Case study Shop News Blog Community Home Start Get started Quick tour of Polymer Install Polymer 2.x Build an element 1. Get set up 2. Add local DOM 3. Data binding & properties 4. React to input 5. Theming with custom properties Build an app 1. Get set up 2. Create a new page 3. Add some elements 4. Deploy Polymer Feature overview About this release What's new in 2.0 Upgrade guide Hybrid elements Release notes Custom elements Custom element concepts Define an element Declare properties Shadow DOM & styling Shadow DOM concepts DOM templating Style shadow DOM Custom CSS properties Events Handle and fire events Gesture events Data system Data system concepts Work with object and array data Observers and computed properties Data binding Helper elements Browser support Overview Polyfills ES6 Tools Tools overview Polymer CLI CLI commands Create an element project Create an application project Document your elements Test your elements Web services polymer.json specification Node support Resources Glossary API Reference API Reference Global settings App Toolbox What's in the box? Using the Toolbox App templates Responsive app layout Routing Localization App storage Service worker Deploy Build for production Serve your app The PRPL pattern Case study Shop News Blog Community

Last week, thousands of developers converged in Mountain View, CA for Google I/O 2017. While the Polymer Project has been featured at I/O for the past few years, 2017 was our largest presence yet. Our presence included three sessions from our team, two codelabs, tons of Office Hours, an After Hours installation, and an event-wide scavenger hunt.

Sessions

Future, faster: Unlock the Power of Web Components with Polymer
with Kevin Schaaf, Taylor Savage, and Wendy Ginsberg

Polymer Keynote IO talk

Hear all about the Polymer Project’s mission, dive into Polymer 2.0 and the goals behind its release, and take a tour through all of the other areas we’re working in.

Polymer: Billions Served; Lessons Learned
with Monica Dinculescu

Monica's IO talk

What is the benefit of the modularized Polymer 2.0 library, and how does it all work? Monica takes you through each part, building one on top of the other, as we construct a Polymer element from a vanilla one.

Developer Tooling for Web Components
with Justin Fagnani-Bell

Justin's IO talk

On the Polymer Project, we create Tools for all web components, not just those built with Polymer. Justin will show you how our tools empower you every step of the way as you build your app, from initialization all the way through deployment. Of course, you will be working with all of the best web practices including bundling, PRPL pattern rendering and loading, and more.

Codelabs

PRPL with Custom Elements and Firebase

Learn how to implement the PRPL pattern using an app built on Custom Elements and Firebase hosting.
Get started.

How to Contribute to the Web Components Ecosystem

Learn to build a web component with plain JavaScript, and how to publish it on WebComponents.org.
Get started.

Fun & Games

Cheese

While we build the App Toolbox to help developers build web component based progressive web apps more efficiently and simply, we also build reference apps and case studies. Our most recent Apps project came out of a challenge to our team: to build an awesome mobile experience that we would only expect from native, in a tiny fraction of the size. Out of that came Cheese, a photo editing app powered by Google’s Vision APIs which detects your facial features and expression, and smartly decorates your photo with silly emoji combinations. Try it out at cheese.polymer-project.org and share your best photos with @polymer.

Polymon Global Scavenger Hunt

All around the I/O grounds, Physical Web beacons and QR code posters were hidden, so attendees could search and find Polymon, virtual magical creatures. They could use their collection to assemble a team and battle their friends! Codes were released on social media, and QR code posters were present at I/O extended events around the world, so everyone was able to participate. The I/O version of Polymon can be found at polymon.polymer-project.org.

After Hours Polymon Battle Stage

On the first night of I/O, the After Hours Arcade was turned into a Polymon Battle Stage! Attendees lined up to sit in the Battle Pods and challenge others on the big screen. The game was developed and advanced to handle this live spectator experience!

More on Polymer 2.0