freeze-element
The freeze-element
freezes a DOM element, thereby preventing new nodes from being adding inside the element.
Parameters
Name | Description | Example | Mandatory |
---|---|---|---|
property | The CSS selector for the parent element that you want to freeze. |
| Yes |
options | A single parameter for snippet options. A string containing all the options you want to pass, each of them separated by a plus character (+), and empty single quotes if none (''). Available options:
|
| No |
exceptions | An array of regular expressions/selectors used to specify the nodes you don't want to prevent being added. Each array item can be:
|
| No |
Filter examples
The following table lists examples that use the abort-on-property-write
snippet:
Filter | Result |
---|---|
| Any addition of an immediate child to the |
| Any addition of a node to the entire subtree of |
| Any addition of an immediate child to the |
| Any addition of an immediate child to the |
| Any addition of an immediate child to the |
| Any addition of an immediate child to the |
| Any addition of a node to the entire subtree of |
| Any addition of an immediate child to the |
| Any addition of a node to the entire subtree of |
| Any addition of a node to the entire subtree of |
Debugging
During debugging, you'll see messages in your browser's Developer Console of the browser for every attempt to add a child node inside the frozen element.
As a result, the elements will be added to the frozen parent node, but they won't be visible as the CSS property display: none
is added.
For all the DOM mutation properties apart from textContent
, innerText
and nodeValue
, the structure of the message is the following (each line in the table is a line printed to the console):
Message | Structure | Explanation | Examples |
---|---|---|---|
title |
|
|
|
property used |
|
|
|
parent node |
|
|
|
added node |
|
|
|
For textContent
, innerText
and nodeValue
, the structure of the message is the following (each line in the table is a line printed to the console):
Message | Structure | Explanation | Examples |
---|---|---|---|
title |
|
|
|
parent node | [freeze][changeId] content of node: parentNode
|
|
|
new content | [freeze][changeId] changed to: newContent
|
|
|
property used |
|
|
|
Considerations
Keep the following in mind when you use the freeze-element
snippet:
Logging is more reliable than highlighting. Sometimes, some elements don't show as highlighted even if their style has the correct rules.
Sometimes, when you hover on
addedNode
in the console, the added node is not highlighted on the page as it should be. That is because for some DOM mutation properties, likeinnerHTML
,outerHTML
orinsertAdjacentHTML
, the element loses its reference when it gets added.When you see all the elements of a parent node highlighted/logged, that doesn't necessarily mean nothing was there to begin with. That's because of how
innerHTML
andouterHTML
work: changing these properties of an element results in overriding the content. When you see all the children highlighted, then, it could be becauseinnerHTML
orouterHTML
was used.
Last updated