ShadowDOM and inner-outerHTML.md

Case 1: intrinsic ShadowDOM

// markup
<x-foo>My Content</x-foo>

// innerHTML should only ever reflect light dom, node contents 
// are interchangeable without regard to the node itself
xfoo.innerHTML === ‘My Content’

// outerHTML does not reflect ShadowDOM, as (if it exists) it’s 
// intrinsic to <x-foo>
xfoo.outerHTML === ‘<x-foo>My Content</x-foo>’;

// no lossy
xfoo.innerHTML = xfoo.innerHTML;
// no lossy (assuming xfoo is an only-child, which is WLOG)
xfoo.parentNode.innerHTML = xfoo.outerHTML;

Case 2: non-intrinsic ShadowDOM

// markup
<div>
    <shadow-root>
        [decoration]<content></content>[decoration]
    </shadow-root>
    My Content
<div>

// innerHTML should only ever reflect light dom, node contents 
// are interchangeable without regard to the node itself
div.innerHTML === ‘My Content’

// outerHTML DOES reflect ShadowDOM, as it’s not intrinsic to <div>
div.outerHTML ===
‘<div><shadow-root>[decoration]<content></content>[decoration]
</shadow-root>My Content</div>’;

// no lossy
div.innerHTML = div.innerHTML;
// no lossy (assuming div is an only-child, which is WLOG)
div.parentNode.innerHTML = div.outerHTML;

Case 3: Subtrees

// markup
<anytag>
    <x-bar>foo</x-bar>
    <video></video>
    <div>
        <shadow-root>
            [decoration]<content></content>[decoration]
        </shadow-root>
        <x-zot></x-zot>
    </div>
</anytag>

// as in above examples, anytag’s innerHTML never
// reflects any information about his Shadow DOM
anytag.innerHTML == <exactly the markup shown above>

// note that <div>’s <shadow-root> is emitted into
// anytag’s innerHTML because it’s part of <div>’s
// outerHTML

// no lossy
div.innerHTML = div.innerHTML;
// no lossy (assuming div is an only-child, which is WLOG)
div.parentNode.innerHTML = div.outerHTML;