JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/0.5.2/webcomponents.min.js"></script>
The math:

<math display="block">
    <mi>x</mi><mo>+</mo><mi>y</mi>
</math>

<button id="insert">Insert ShadowDOM</button>

<p>If your browser supports ShadowDOM (either natively or by polyfill), clicking the 'Insert ShadowDOM' button should replace the 'x+y' above with the text 'This is Shadow DOM...'.</p>

<p>The 'Check children' button below shows the children elements of the math element. Originally, the children are mi/mo/mi elements. After inserting a ShadowDOM, the children should be <em>unaltered</em>, so programmatic inspection of the math element still shows the MathML markup.</p>

<button id="check">Check children</button>

<div id="children"></div>

CSS

math {
    display: inline;
    border: 1px solid red;
}
math[display="block"] {
    display: block;
    text-align: center;
}

JavaScript

$('#insert').on('click', function() {
    var root = $('math')[0].createShadowRoot();
    var div = document.createElement('div');
    div.innerHTML = 'This is Shadow DOM<br>x<sup>2</sup><br>It could be any HTML, including images';
    root.appendChild(div);
});

$('#check').on('click', function() {
    var children = $('#children').empty(),
        c = document.querySelector('math').firstChild;
    while (c) {
        if (c.tagName)
            children.append($('<code>' + c.tagName + '</code><br>'));
        c = c.nextSibling;
    }
});