在iframe的文档和/或shadow-root中注入html dom

Question

I am injecting iframe onto the webpage using javascript (using chrome extension). Using javascript, I am creating iframe and I can access my html's url, so I though I can fetch the DOM using $.get

var elt = document.createElement('iframe');
elt.id = 'my_iframe';

$.get(chrome.extension.getURL('views/test.html'), function(doc) {

    var container = document.querySelector('#my_iframe');

    console.log(container.documentContent);  // can access
    console.log(container.shadowRoot); // can't access

    // ideally:
    container.shadowRoot($(doc));
    container.contentDocument($(doc));

});

document.getElementsByTagName('body')[0].appendChild(elt);

How can I inject my 'text.html' inside the #shadow-root ?

The reason is that, when I use elt.src = url , it doesn't wrap the html content inside #document or #shadow-root , and this results in a bug - (blurry content in iframe when not wrapped in #document or #shadow-root - bug report )

Answer 1

If you are just changing the contents of an iframe, you can do it by:

const iframe = document.querySelector('#myIframe')
iframe.outerHTML = '<iframe></iframe>' // clears the iframe
iframe.contentDocument.open()
iframe.contentDocument.write(yourHTMLText)
iframe.contentDocument.close()