Salesforce4U

 To access elements rendered by component we need to use template property. Access element from tag. <h1>Element Inside H1 Tag </h1> const h1Element = this.template.querySelector('h1'); Console.log(h1Element.innerText ); // It will print "Element Inside H1 Tag" We can apply style sheet after getting DOM element dynamically.  h1Element.style = 'color:red;border-style: solid;' Accessing element using class. const userElements =  this.template.querySelectorAll('.name'); It will return node list (multiple items that is why  querySelectorAll is being used.) We can set attributes to each element of node list dynamically or apply style sheet. Array . from ( userElements ). forEach ( item => {             console . log ( item . innerText );             item . setAttribute ( 'title' , item . innerText );               item.style = ' background-color :  ...

 What is DOM ? DOM - Document Object Model is a programming API for HTML or XML component, It defines logical structure of documents and the way document is accessed and manipulated. Basically the DOM is tree structure representation of web page. What is Shadow DOM ? Shadow DOM brings encapsulation concept to DOM. It enables to link hidden separate DOM to an element. Benefits: DOM query, CCS rules and event propagation does not cross shadow boundary, hence creating encapsulation. Basically when we try fetch all the DOM using query selectors, we will not get DOM elements for child component in parent component. When we apply style sheet to DOM of parent component, there will be no impact to child component DOM. Event propagation will not work from child to parent or vice versa by default.  How to attach shadow DOM to element ? <script>     const element = docuement.queryselector('#elementId');     const shadowRoot = element. attachShadow ({mode:'open'}...

 Adding one LWC component within body of another LWC component  is known as component composition. It allows building complex component from simper building block component. How to refer child component from parent component ? 1. childComponent            <c-child-component></c-child-component> 2. childComponentDemo        <c-child-component-demo></c-child-component-demo> 3. childComponentLWC          <c-child-component-l-w-c></c-child-component-l-w-c> This naming convection known as kebab case. Replace capital letter with small and prefixed with hypen. Advantages - Defining smaller component will make testing easy and reusability. 

 There are 2 types of template looping in LWC 1. for:each 2. iterator For Each < template for:each = {array} for:item = "currentItem" for:index = "index" > // we can add repeatable components </ template > Note-  1. for:each attribute take array as input 2. for item represent the current item of the loop, currentItem is the alias name, we can name to anything. 3. for:index holds index of current element of an array. Importance of Key attribute in Template loop Key is a special string/integer attribute required to be included to first element inside template when creating list of elements. Key help LWC engine to identify which items added,removed or modified. Key must be string or integer, It cant be object. Array Index cant be defined as key. < template >     < lightning-card title = "Best Companies" >         < div class = "slds-m-around_medium" >             < template for:each...

 There are 2 special directive which is being used for conditional rendering of DOM element.   1.  if:true    2. if:false  <template if:true={expression}>     Render when expression is true  </template>     <template if:false={expression}>     Render when expression is false  </template> Notes -  1. Expression can be JavaScript property 2. Can be property of an object defined in JavaScript. example {employee.name} 3. Ternary operator can not be used inside expression. 4. Array also can not be used in the expression. 5. To use computed value use getters.  Here is component code which have if-true if-false also computed expression in if-directive. < template >     < lightning-card title = "Conditional Rendering" >         < div class = "slds-m-around_medium" >             < lightning-button   ...