Shadow DOM in LWC

 DOM stands for Document Object Model.Lightning web component use the shadow DOM.
 
   The element in each lightning web component are encapsulated in a
   shadow tree.This part of the DOM is called a shadow tree because it's
   hidden from the document that contains it.The shadow tree affects how
   you work with css,events and the DOM.
 
   Shadow DOM is a web standard that encapsulates the elements of a component
   to keep styling and behavior consistent in any context.
   Since not all browsers that Salesforce supports implement shadow DOM, LWC
   uses a shadow DOM polyfill.
   A polyfill is code that allows a feature to work in a web browser.
 
   The Shadow DOM have three primary effects
   1.DOM access
   2.CSS isolation
   3.event propagation
 
   Shadow DOM basics :

 
   1.Shadow host : The regular DOM node that the shadow DOM is attached to.
                    it hosts the shadow root.
   2.Shadow root : The root node of the shadow tree.
   3.shadow tree : the DOM tree inside the shadow DOM.
   4.shadow boundary : the place where the shadow DOM ends,and the regular DOM begins.