Screencast Meet Web Components HTML/CSS

  • Evan Machnic
Badge student

Locked Content

A subscription is required for viewing this video. Enroll now to get full access to all Code School courses and content.

Enroll Now Sign in


  1. Dmitry Shlensky said

    Web Components are like AngularJS directives, but without shadow dom.

  2. Keenan Brock said

    Great episode. By the way, the aside tag can be used for sidebars as long as it is not in the article. Also, AngularJS 2.0 is planning on using web components for directives.

  3. Alex said

    I'd love to see a video about how to create web components myself.

  4. Bradley Flood said

    Good intro thanks. Just a note that using ID's for CSS selectors is generally advised against,

  5. Kevin Lozandier said

    Hi, Bradley: With the encapsulation techniques available to developers towards creating web components that they can reuse and make accessible, conventions typical of current CSS development don't necessary translate well with the development of web components.

    You're creating a single entity that will highly likely have many ids to hook into as its implements WAI-ARIA to be a sound web component.

    There won't be much value adding classes for the sake of classes until you encounter the classic use cases of classes: To account for and maintain the repeatability of certain declarations of value within a specific context of varying specificity.

    The reasons many wouldn't use ids for CSS selectors for some web applications generally aren't that convincing to be applied to the styling conventions of web components.

  6. Faculty

    Evan Machnic said


    One of the benefit of using custom elements and web components is that of encapsulation. If it makes sense for you to use an ID vs. a class, then you don't need to worry about the ID in the custom elements conflicting with one in the main page. Everything is encapsulated within the custom element.

About This Screencast

In this episode of Code TV, we take a look at a brand new set of standards for web development. Evan Machnic digs into the changes that allow you to package code in a reusable way. He explains what Web Components are, the rationale behind them, and demonstrates some examples of Web Components in action.

You need to be an enrolled student in order to view this video and subscribe.

Enroll Now