DEV Community

Cover image for 〈load-file〉Web Component, add external content to the DOM
Danny Engelman
Danny Engelman

Posted on • Updated on


〈load-file〉Web Component, add external content to the DOM

Whilst we are waiting for HTML Modules to arrive in all Browsers (Chrome Platform Status)

The〈load-file〉Web Component

✔️ Fetches any external text file: ie. .txt , .svg , .html

✔️ Injects the content into the DOM

  • in shadowDOM

    • respects lightDOM content for shadowDOM <slot> elements
    • with optional scoped CSS styling! ✨✨✨
    • can move lightDOM content to shadowDOM
  • Or replaces the <load-file> element itself with the replaceWith attribute

✔️ is not a replacement for 'HTML Imports'; <script> will not execute

✔️ is done in 8 lines of code:

There are multiple ways to put an external SVG file on the page


   <load-file replaceWith src="//"></load-file>

   <load-file src="//">
    <style shadowRoot>
      path:nth-child(2n+2) {
        fill: GREEN; /* shadowDOM style does NOT style global DOM */
Enter fullscreen mode Exit fullscreen mode
  • display as bare SVG, by using the replaceWith attribute
    • (global) CSS styles all SVGs (see red heart puzzle pieces)
  • OR, display contained in shadowDOM
    • now (local) CSS styles one SVG (see green heart puzzle pieces)

Loading the <load-file> Web Component

Load the element from the Repo

<script src=""></script>
Enter fullscreen mode Exit fullscreen mode

It doesn't matter when the Custom Element is defined.

Any existing <load-file> elements in the document will automagically upgrade when the Custom Element is defined later.

or define the entire element in the <head> of your HTML document with a <script> tag:

customElements.define("load-file",class extends HTMLElement{async connectedCallback(){
await fetch(this.getAttribute("src"))).text();this.shadowRoot.append(...this.children);
Enter fullscreen mode Exit fullscreen mode

Using the <load-file> Web Component

Specify the full path in the src attribute

add the replaceWith attribute so the src content replaces the <load-file> Element itself in the document

<load-file  replaceWith  src=""></load-file>
Enter fullscreen mode Exit fullscreen mode

!! Note the CAPITAL in replaceWith`(creates a better GZip compressed file)

Without replaceWith the source content will be injected in shadowDOM:

<load-file src=""></load-file>

All elements with attribute shadowRoot are moved to shadowDOM:

<load-file src="">
<style shadowRoot>
path:nth-child(2n+2) {
fill: GREEN; /* shadowDOM style will NOT style global DOM */

Top comments (2)

darkwiiplayer profile image
𒎏Wii 🏳️‍⚧️

Pretty cool, I like it :D

However, you forgot to mention SVG can be loaded with <object>, which allows some more of the CSS inside the SVG to do its magic, outside style rules still don't apply, but if I remember correctly, outside custom properties are available inside the SVG.

dannyengelman profile image
Danny Engelman • Edited


I added object and a link to which describes all in detail

Also changed functionality slightly. Only the first <style> element will now be moved to shadowDOM. That way any <slot> element in a loaded .html file will slot content from lightDOM correctly