What's the benefit of Object.freeze() not freezing objects within the passed object?

Question

I was learning more about the methods of JavaScript's Object constructor on MDN and I noticed that the last sentence of Object.freeze's description reads:

Note that values that are objects can still be modified, unless they are also frozen.

A behavior like that seems like it should be opt-in. What exactly is the benefit of having to manually freeze a frozen object's objects recursively?

If I'm freezing an object, why would I want the objects inside of it to still be mutable?

Answer 1

I think if recursive is the default strategy, some complex Objects could not behave as expected. Think about following situation:

<div id="root">
    <div id="stem">
        <div id="leaf>
        </div>
    </div>
</div>

and for some reason I want to freeze the stem, so I wrote these code:

Object.freeze(document.getElementById('stem'));

If it freezes recursively, the leaf would be frozen too, and it seems OK: if I want to freeze the stem, I also want to freeze it's children.

But wait, note that stem has another property -- It has parentElement too. So what will happen? When I freeze stem, I also freeze stem.parentElement, and stem.parentElement.parentElement... This is never what I want.