To lock the container press the lock button on the container's toolbar.
Use Cases
If you don’t lock a container before JS operates over it, it’s certain you will end-up with bad side effects when you make a next manual modification to layout afterwards.
Example 1
new Vue({
template: '<section>APP</section>',
el: '#app'
})When JS is executed Vue app will ‘overtake’ a control over div#app and will entirely replace it with <section>APP</section>
If we modify the layout manually afterwards, we will entirely lose div#app. After the page is reloaded we will notice that div#app has disappeared. To avoid this behavior lock the container and then let JS modify it.
Example 2
JS modified the inner HTML of the container, and it was saved into database.
document.querySelector(“#app”).innerHTML = “<ul><li>1</li><li>2</li><li>3</li></ul>”
<div id="”app”"></div>If we modify the layout after JS execution, our div may end up saved with all the inner HTML, so on next page loading we will not have empty div#app. To avoid this effect, we should lock the container.
It is not possible to remove the locked container.
To be able to remove the container you should unlock it.
DIMS content can be modified inside locked containers
DIMS content is allowed to be modified for elements that are under a locked containers. In the following example <div> is locked, but paragraph content still can be edited.
<div><p>I can edit the text of this paragraph</p></div>