DOM HTML in Javascripts
With the object model, JavaScript gets all the power it needs to create dynamic HTML (Dynamic HTML was the immediate ancestor of the Document Object Model, and it was originally thought of largely in terms of browsers). Through this bestowed power, JavaScript can :
change all the HTML elements in the page
change all the HTML attributes in the page
change all the CSS styles in the page
remove existing HTML elements and attributes
add new HTML elements and attributes
react to all existing HTML events in the page
create new HTML events in the page
DOM HTML/HTML DOM defines:-
HTML Elements as Objects
All HTML Elements Properties [values which we can get (or fetch) or set are called Property of an Object (in this case Element will also suffice)]
HTML Elements Methods to access [actions (or logic) which we can be executed are called Methods of an Object (in this case Element will also suffice)]
HTML Elements related Events [triggers (or logic) which can lead to execution of a logic are called Events of an Object (in this case Element will also suffice)]
Below example will change the content (the innerHTML) of <p> element with id="stuff", here getElementById is a method, while innerHTML is a property.:
<html> <body> <p id="stuff"></p> <script> document.getElementById("stuff").innerHTML = "Hello SalesforceFresher!"; </script> </body> </html>
For more detailed information on the Property and Method aspect related to HTML DOM you can visit here.
Example of another Property of HTML DOM is
Get the first element in the document with class=”example”:
document.querySelector(“.example”);
The querySelector() method only returns the first element that matches the specified selectors. To return all the matches, use the querySelectorAll() method instead.
Shadow DOM in LWC
Till now we have come to know that HTML DOM and its related elements can be changed, added to, deleted etc.. using the document properties(as everything is global here) and this might seem helpful when manipulating the elements for the sake of a versatile web page experience on the fly. But in the wrong hands this same mechanism can open pandoras box when manipulated with incorrect intentions and there needs to be certain security checks to ensure the elements are not played around with.
To make this happen DOM elements are hidden from prying eyes using another concept of DOM encapsulation called Shadow DOM (DOM hidden within a DOM). This way developers are able to share a component without worrying about component element manipulation by some aritrary HTML,CSS and Javascript. The internal DOM structure of a web Component shared are hidden in the form of Shadow Tree. Shadow Tree impacts how one goes about working with CSS ,events and DOM in general. For example, Shadow Tree ensures that any kind of CSS implemented in the parent element will not implement for Shadow Tree element, a developer would need to write CSS specific to Shadow Tree Elements.
A DOM element can have two types of DOM subtrees:
Light tree – a regular DOM subtree, made of HTML children.
Shadow tree – a hidden DOM subtree, not reflected in HTML.
Key Points to remember About Shadow Tree:-
When a document element contains both types of tree structure the browser will only render the Shadow Tree.
A Developer can render only 1 shadow root per element.
The Shadow tree is a node tree whose root is a shadow root.
A Shadow tree would always be connected to a host element (might be a light tree or another shadow tree) and will not be present on its own.
Shadow tree elements are not visible to document.QuerySelector() method from Light Tree in HTML DOM.
Comments