Modify page contents via shadow dom?

function shadowify(){
        // Get the body element
        var body = $(`body`);

        // Move the contents to the new hidden body
        $(`html`).append(`<div id="__body" data-shadow></div>`);
        var hiddenBody = $(`#__body`);
        hiddenBody.html(body.html());

        // Create a shadow root for the body element
        var shadowRoot = hiddenBody[0].attachShadow({mode: 'open'});

        // Move the contents of the body element to the shadow DOM
        shadowRoot.innerHTML = hiddenBody.html();

        // Clear the contents of the body element and hidden body
        body.html('');
        hiddenBody.html('');
    };