Skip to content

JavaScript Quiz (50 Questions)

Answer all questions, track your progress live, and see your final JavaScript quiz score at the end.

Progress 0 / 50 answered
Q1. What are Web Components mainly used for?
Q2. Which API is used to create custom HTML elements?
Q3. Which method registers a custom element?
Q4. Which class do most custom elements extend?
Q5. What must a custom element name contain?
Q6. Which name is valid for a custom element?
Q7. Which lifecycle method runs when a custom element is added to the DOM?
Q8. Which lifecycle method runs when a custom element is removed from the DOM?
Q9. Which lifecycle method runs when an observed attribute changes?
Q10. Which static getter lists attributes to observe?
Q11. What is Shadow DOM used for?
Q12. Which method creates Shadow DOM?
Q13. Which Shadow DOM mode allows access using element.shadowRoot?
Q14. Which Shadow DOM mode hides direct access through element.shadowRoot?
Q15. What is a shadow root?
Q16. What is light DOM?
Q17. What is a slot in Web Components?
Q18. Which element is used to project external content into Shadow DOM?
Q19. Which attribute assigns content to a named slot?
Q20. Which HTML element stores reusable markup that is not rendered immediately?
Q21. What is Declarative Shadow DOM?
Q22. Which attribute is used for Declarative Shadow DOM?
Q23. Which Declarative Shadow DOM syntax is valid?
Q24. What are CSS Custom Properties useful for in Web Components?
Q25. Which syntax reads a CSS Custom Property?
Q26. Can CSS Custom Properties inherit into Shadow DOM?
Q27. What is the part attribute used for?
Q28. Which selector styles exposed Shadow DOM parts?
Q29. Which example styles an exposed part?
Q30. What does ::slotted() style?
Q31. Where is ::slotted() usually written?
Q32. What is a limitation of ::slotted()?
Q33. Which API creates a custom event?
Q34. Which method sends an event from a Web Component?
Q35. Which CustomEvent option carries custom data?
Q36. What does bubbles: true do?
Q37. What does composed: true do?
Q38. Which method helps inspect the full event path across Shadow DOM?
Q39. What is event retargeting in Shadow DOM?
Q40. Which method checks if a custom element is already defined?
Q41. Which method waits until a custom element is defined?
Q42. Why should duplicate custom element definitions be avoided?
Q43. What is element upgrade?
Q44. Which callback is best for cleanup?
Q45. What should be cleaned up in disconnectedCallback?
Q46. What is ElementInternals useful for?
Q47. What are form-associated custom elements?
Q48. What is delegatesFocus used for?
Q49. Are Web Components framework-independent?
Q50. Which combination is best for a public Web Component styling API?