HTML Expert Challenge
Test your limits with 20 expert-level technical questions on advanced web APIs and architecture
Which HTML attribute is used to define inline styles?
Comprehensive Study Guide: Web Components, Shadow DOM & Security CSP
Web Components provide native browser-level component encapsulation without requiring frameworks like React or Angular.
This expert assessment covers Custom Elements v1 (customElements.define), Shadow DOM encapsulation (open vs closed mode), <template> and <slot> projection, and security standards like Content Security Policy (CSP) and Subresource Integrity (SRI).
Core Technical Competencies Tested in This Lab
Custom Elements v1 API
Extending HTMLElement with lifecycle callbacks: connectedCallback, disconnectedCallback, and attributeChangedCallback.
Shadow DOM Encapsulation
Attaching shadow roots (attachShadow) to scope CSS styles and DOM subtrees entirely inside the component.
HTML Templates & Slots
Using <template> for inert markup that only parses when cloned, and <slot> for declarative composition.
Content Security Policy (CSP)
HTTP response headers restricting script sources, object sources, and inline execution to eliminate XSS.
Architectural Code Patterns & Implementation Standards
A reusable custom element with encapsulated shadow styles and slot projection.
class UserBadge extends HTMLElement {
constructor() {
super();
const shadow = this.attachShadow({ mode: 'open' });
shadow.innerHTML = `
<style>
:host { display: inline-block; font-family: sans-serif; }
.badge { background: #0ea5e9; color: white; padding: 4px 10px; border-radius: 99px; }
</style>
<div class="badge"><slot>Default User</slot></div>
`;
}
}
customElements.define('user-badge', UserBadge);Production Best Practices
- Always include a hyphen in custom element names (e.g. user-badge) as required by the W3C spec to prevent collision with future HTML tags.
- Implement Subresource Integrity (SRI) on all external CDN script and style tags to prevent supply-chain tampering.
- Use Content Security Policy headers with strict nonces or hashes rather than 'unsafe-inline'.
Common Pitfalls & Anti-Patterns
- Attempting to query Shadow DOM elements with document.querySelector() without traversing shadowRoot.
- Modifying DOM attributes inside constructor() instead of connectedCallback().
Frequently Asked Conceptual Questions & Answers
Q1: What is the difference between Open and Closed Shadow DOM?
In 'open' mode (attachShadow({mode: 'open'})), the shadow root is accessible from external JavaScript via element.shadowRoot. In 'closed' mode, element.shadowRoot returns null, preventing external inspection. However, closed mode does not provide complete security and makes accessibility testing difficult, so 'open' is standard practice.
Ready to expand your skillset further?
Explore complete guided tutorials, interactive playgrounds, and comprehensive interview collections.
Explore Related Tools
Hand-picked utilities and calculators related to this tool.
