Search code examples
javascriptgoogle-chromeinnerhtml

What is the purpose/history of the getInnerHTML function in chrome


Chrome appears to have defined HTMLElement.prototype.getInnerHTML. I can't find anything about this online. Obviously chrome still provides the innerHTML property which works as expected, but I wonder why the getInnerHTML method is there. I tested in safari and firefox and it is not present so I'm assuming it's chrome specific. I'm wondering about the purpose/history of this method as opposed to innerHTML

picture of chrome devtools showing the getInnerHTML property


Solution

  • This feature seems to have been added to help serialise DOM including Shadow DOM elements.

    This is handy because the usual methods like HTMLElement.prototype.outerHTML and HTMLElement.prototype.innerHTML don't work with Shadow DOM.

    For more information about how this method works, you can check Chromium developer's post: https://github.com/mfreed7/declarative-shadow-dom?tab=readme-ov-file#serialization

    In addition to that, here is a javascript polyfill to support the method in other browsers: https://gist.github.com/developit/54f3e3d1ce9ed0e5a171044edcd0784f

    Here is an issue on the html standard github repo about adding the getInnerHTML method: https://github.com/whatwg/html/issues/8867