Join Kai Gittens for an in-depth discussion in this video About Web Components, part of Up and Running with Ember.js.
- View Offline
I want to close this chapter and have a quick discussion about something mentioned earlier, web components. Web components is the term for a set of web technologies that are still being developed at the time of this recording, but a lot of their features are landing in browsers anyway. Web components allow for the creation of your own custom HTML elements in the same way that Ember components let you create custom elements as well. So in this chapter we used an Ember component to create a custom element called single-collection.
We placed some HTML and styles inside, in the capsulated components template, and that generated a custom element that we could use in another type of template. Ember's component functionality is actually based on web components. Web components also allow for the use of encapsulated blocks of code to create custom elements, but they actually create a reusable HTML tag. So, if we use web components to create a single collection element instead of Ember, it would look like what we're seeing on the screen here.
The tag has angle brackets and just like we saw with our Ember custom element, the tag name is two words separated by a dash. The World Wide Web Consortium, or W3C, is in charge of creating the finalized web component standard, and the Ember development team followed the standard as closely as it could when they built the Ember components feature. And when the standard gets updated, the team tries to apply the changes to the Ember component as soon as possible.
The core team actually works with the W3C in developing the standard. Now, even though many browsers have implemented web component features at the time of this recording, the standard is still being developed, and not every browser has implemented every feature. But browsers are adopting the features at a fast pace. And if development continues as planned, web components will dramatically change web development. So it's good to read up on them a little.
A really good primer article on the subject is on CSS-Tricks. It's written by Rob Dodson, who's on the Google team, and has written and spoken extensively about web components. It's a really good article that clearly explains web components, and also describes how you can use them in your work now with the help of tools like Polymer and XTag.
- Installing Ember Inspector
- Reviewing routes with Ember Inspector
- Loading templates with routes
- Creating links with the link-to helper
- Adding component templates
- Loading model data
- Customizing components
- Building nested routes and route objects
- Loading data with object and array controllers
- Creating interfaces