I'm trying to use CSS Containment(contain: layout), but it doesn't seems to work correctly on Chrome 62.
I want to know a proper way to use contain: layout or what is my misunderstanding.
Code is here:
index.html:
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>CSS Containment</title>
<script src="main.js" defer></script>
</head>
<body>
<div id="container" style="contain: layout; height: 300px; width: 300px">
</div>
</body>
</html>
main.js:
const container = document.querySelector('#container');
setTimeout(() => {
const elem = document.createElement('div');
elem.textContent = 'content';
container.appendChild(elem);
}, 100);
I expect that the #container element is rendered as a layout root after appendChild(elem), but Chrome Dev Tool shows that the root is still the #document.
On the other hand, contain: layout size or contain: strict works correctly, which means #container becomes a layout root.
Other browsers don't support CSS Containment yet, so I can't identify it's Chrome-specific or on the spec.
If you have any ideas, please give me a hand.
