DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for Shadow DOM... Illustrated
Rajasneha
Rajasneha

Posted on

Shadow DOM... Illustrated

What is DOM

Browser generates Document object model from static html files in order to manipulate the structure, style and content.

Image description


Enter Shadow DOM

Shadow DOM enables encapsulation to keep the markup, style and behaviour hidden and private to the component that hosts it.

Image description


Image description


Events

Events that are thrown from within a shadow DOM usually do not propagate outside the boundary unless it is set to composed: true

Image description


If you like this content please follow on twitter for more of these - https://twitter.com/Rajasneha_dev

Top comments (0)

typescript

11 Tips That Make You a Better Typescript Programmer

1 Think in {Set}

Type is an everyday concept to programmers, but it’s surprisingly difficult to define it succinctly. I find it helpful to use Set as a conceptual model instead.

#2 Understand declared type and narrowed type

One extremely powerful typescript feature is automatic type narrowing based on control flow. This means a variable has two types associated with it at any specific point of code location: a declaration type and a narrowed type.

#3 Use discriminated union instead of optional fields

...

Read the whole post now!