HTML5 Web Component Fundamentals

Visit Tutorial Page ( Report)

In this course, you'll learn how HTML5 Web Components give us the power to extend the web with our own rich, standards-based components. Web developers have been struggling for years to create truly reusable components. We struggle with styling, bundling, defining templates, and encapsulating our markup and styles from accidental manipulation. But HTML5 Web Components provide the power to finally define standards-based, reusable web components through four new technologies. Learn how to use the Shadow DOM to encapsulate the DOM and styling for your components. Define inert templates with the template tag. Extend HTML by registering your custom elements. And bundle this all together in a simple reusable package using HTML5 imports.

  • Five Problems, One Solution
    • Intro
    • Problem 1: Undescriptive Markup
    • Problem 2: Style Conflicts
    • Problem 3: No Native Templates
    • Problem 4: No Bundling
    • Problem 5: No Standard
    • The Solution: Web Components
    • Browser Support
    • Why Learn Web Components First?
    • Selecting a Level of Abstraction
    • The Dawn of the Democratic Web
    • Summary: Why Web Components?
  • Templates
    • Intro
    • Common Approaches
    • Template Characteristics
    • Defining and Cloning
    • Injecting Dynamic Data
    • Nested Templates
    • Summary
  • Custom Elements
    • Intro
    • Core Functionality
    • Registering Custom Elements
    • Instantiating Custom Elements
    • Instantiating Extended Custom Elements
    • Lifecycle Callback Methods
    • Naming Approaches
    • Summary
  • Shadow DOM Fundamentals
    • Intro
    • Light DOM vs. Shadow DOM
    • You Already Use Shadow DOM
    • Shadow DOM Alternatives
    • Demo: Creating Shadow DOM
    • Shadow Host and Shadow Boundary
    • Demo: Shadow DOM Terminology
    • Demo: ShadowRoot DOM Methods
    • JavaScript Is Not Encapsulated
    • Demo: JavaScript Is Not Encapsulated
    • Summary
  • Shadow DOM Insertion Points & Events
    • Intro
    • Content Insertion Points
    • Insertion Points vs. Distributed Nodes
    • Content Selectors
    • Shadow Insertion Points
    • Listing Distributed Nodes and Destination Insertion Points
    • Event Retargeting
    • Events That Stop
    • Summary
  • Shadow DOM Styling
    • Intro
    • :host Pseudo Selector
    • :host Theming
    • :host Specificity
    • :host States
    • :host-context Pseudo Selector
    • Styling Distributed Nodes With the ::content Pseudo Element
    • ::shadow Pseudo Element
    • /deep/ Combinator
    • :unresolved Pseudo Selector
    • Dynamic Styling
    • Summary
  • Imports
    • The Bundling Problem
    • Import Overview
    • Demo: Imports
    • Other Uses for Imports
    • Referencing the Owner Document
    • Demo: Referencing the Owner Document
    • When Does Content in Imports Apply?
    • Demo: When Does Content in Imports Apply?
    • Handling Load and Error Events
    • Demo: Handling Load and Error Events
    • Handling Duplicate Requests and Resource Conflicts
    • Sub-Imports
    • Demo: Sub-Imports
    • Summary
  • Native Alternatives
    • Want Cross Browser Components Today?
    • Browser Requirements
    • Feature Matrix for Non-Standard Frameworks
    • Problems Solved by Non-Standard Frameworks
  • Resources
    • Resources
Write Your Review

Reviews

atieh mokhtari
atieh mokhtari

a really complete course about html5 and it shows you html5 features that makes your coding more professional. I enjoyed the course

1 0 (Report)