Skip to content

Concepts

Event Bubbling:

        <div (click) ="onDivClick()">
            <button  (click) ="onSave($event)">Save</button>
        </div>

export class coursesComponent {
    onDivClick(){
        console.log("Div is clicked");
    }

    onSave($event){
        console.log("button is clicked", $event);
    }
}

on click of the button, both button and div click events are propagated and will keep propagating till the root. To stop this propagation we can use $event.stopPropogation()

    onSave($event){
        $event.stopPropagation();
        console.log("button is clicked", $event);
    }

Shadow DOM: Encapsulation

Allow us to apply scoped styles to elements without bleeding out to the outer world. i.e styles will be specific to their classes in the file.

  var el  = document.querySelector('favorite');
  el.innerHTML =`
      <style>h1 {color:red } </style>
      <h1>Hello</h1>
  `

so in the above code h1 style will be applied to the entire application in case if we are not using the shadow DOM.

  var el  = document.querySelector('favorite');
  var root = el.createShadowRoot();
  root.innerHTML =`
      <style>h1 {color:red } </style>
      <h1>Hello</h1>
  `
Published inUncategorised

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *