Talking about Web Components with Eric Bidelman

Warning This article was written over six months ago, and may contain outdated information.

In September of last year I asked Google’s Eric Bidelman some questions about web components for a feature I was writing. Unfortunately it turned out there was no room in the article for Eric’s answers, but I recently stumbled across them again and decided they are too good to go to waste, so here they are.

Thanks very much to Eric for answering my questions, and apologies if the passage of time has outdated any answers.

What’s your role in the creation or development of web components?

I’m a developer advocate on the Chrome team. My focus the last couple of years has been bleeding edge HTML5 features. Members of the Chrome team started the spec efforts upwards of 2-3 years ago (my contribution to specs is that I helped name “HTML Imports” :)) I remember seeing internal presentations on Shadow DOM from folks like Alex Russell and Dimitri Glazkov; legends on the web. The whole effort really excited me, so I hopped on board.

Around Google I/O, we kick started Polymer and I’ve been on that team ever since.

What was the motivation behind their creation?

The need for a more powerful web platform. If you look at the hoops that developers have to go through to build today’s MVC frameworks and widget sets, it’s craziness. It’s because the web has lacked the fundamentals like encapsulation, style scoping, expressiveness, and the shareability and reusability of code. As a member of the Chrome team, my goal is to help make developers infinitely more productive than we have been. No one would reinvent the wheel every time he/she starts a new project. This is why I’m stoked about everything Web Components brings to the table. I strongly believe they’re the future for developing on the web.

What have been the challenges or learning opportunities in creating them?

Not sure about creating them. I don’t write C++ :) But teaching developers about “components” has been a challenge. We web devs are used a certain way of doing things (e.g. everything is global). Making logical pieces of functionality that work seamlessly together is something totally foreign to us. A lot of people ask questions like, “how do I do that in a web component?”. 90% of the time the answer is “exactly the same as before”. Web components are a mental model shift, but once you make the leap, it’s hard look back.

Are there any potential drawbacks in terms of accessibility or performance?

I’ve seen a few articles on a11y and Shadow DOM but more need more research. There’s a common misconception that content in Shadow DOM is not accessible. Steve Faulkner had a nice writeup on this topic a while back and came away pretty happy.

Most assistive technologies hook directly into the browser’s rendering tree, so they just see the fully composed tree. In fact, if you examine one of the native HTML elements that use Shadow DOM, <input type="date" /> for example, you’ll notice ARIA attributes inside the tree. These work great with assistive technology today! Other types of assistive tools like Chromevox will need to be updated to learn how to traverse the Shadow DOM. There’s ongoing work to make that happen.

Performance is extremely important, but mainly unexplored at this point. We need to build the foundation before we can optimize it, both at the polyfill layer and native implementations. That said, there’s been a lot of recent work in Blink to optimize Shadow DOM. The Blink guys/gals tell me there is tons of low hanging fruit across the board. HTML Imports landing will also be a blessing; make loading faster.

When it comes to perf, I usually say, “building on top of web components won’t magically make an app faster. It’ll make a developer faster!” These new APIs are productivity tools that the web platform has needed for years.

What parts of them are you personally most excited about?

Honestly, the whole stack. It’s great that all of the specs are useful independently of each other… but putting everything together is magical.

Where do you see the extensible web concept going next?

My beef with the spec process has always been that the people standardizing APIs for the web, are not web developers themselves. That’s changed somewhat in recent years, but the shift from spec -> implementation to implementation -> spec makes me have warm fuzzies.

Polymer is a great example of where the concept of the extensible web is working. We started the project as an outlet for developers to try the APIs and give us feedback. The feedback loop from developers Polymer team Blink engineers has been tremendously successful. Seeing this process continually play out reminds me that we’re onto something special. There are a lot of smart people working to make developers’ lives easier. It’s extremely encouraging.

DOM Promises are another example of something that made it to the platform because developers asked for it. I hope we (the community) continue to craft new APIs based on developer pain points.

1 comment on
“Talking about Web Components with Eric Bidelman”

  1. I totally forgot about this! Thanks for posting. It’s fun to look back to Sept and see how things have even changed since then. For example, HTML imports is landing in Chrome 36. Woot!