[Performance Advice] Patching to single element or custom elements #430
Description
Hello,
I'm using IDOM to manipulate my HTML DOM which works perfectly fine.
Here is a code snippet to illustrate my point
The main page The static one
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Some Title</title>
</head>
<body>
<div id="app"></div>
</body>
</html>Now when the user hits the /home page, the #app gets the following component content:
home-page.component.html
<div class="container">
<h1>Welcome Home</h1>
<hello-world-form></hello-world-form>
</div>hello-world.component.html
<form (submit)="this.submitForm($el)">
<input type="text" name="username" [value]="this.username" />
</form>I'm using Two-way data binding which is applied in the username input as when the this.username property is changed, the input value is changed as well and vice versa.
When any change happens to any property i.e this.username i re-run the patcher from the home-page.component.html as it will go through all elements from the top.
the <hello-world> component is removed and its content is added instead.
For example the actual output in the browser will be something like:
<div class="container">
<h1>Welcome Home</h1>
<form (submit)="this.submitForm($el)">
<input type="text" name="username" [value]="this.username" />
</form>
</div>Now my question: As i mentioned earlier, i'm applying the patch function to my #app tag which contains the content of the home-page.component.html file.
Should i leave the hello-world tag in the dom and apply the patch function to that element? i.e the dom will look like:
<div class="container">
<h1>Welcome Home</h1>
<hello-world>
<form (submit)="this.submitForm($el)">
<input type="text" name="username" [value]="this.username" />
</form>
</hello-world>
</div>Or leaving the patch function to the #app element.