Modify page contents via shadow dom?
Is it possible to entirely replace the page contents by hiding the old ones into the shadow dom and pull the elements from there?
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('');
};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('');
};
