⚠️ 📖 DRAFT: <include- src={uri}> Client Side Include

examples/include-/html-fragment-footer.html

@@ -0,0 +1,8 @@
+<script src=https://snuggsi.now.sh/browser-sync.es></script>
+
+<footer>
+  This footer can be re-used across pages without any server or build code.
+</footer>
+
+<include- src=/examples/include-/logo.html></import-html>
+

examples/include-/html-fragment.html

@@ -0,0 +1,21 @@
+<script src=https://snuggsi.herokuapp.com/browser-sync.es></script>
+
+<link rel=stylesheet href=/examples/include-/nested-style.css />
+
+<!-- inline styles apply -->
+<style>
+  h1   { margin-bottom: 1em  }
+  body { background: #001100 }
+</style>
+
+<h1>External Content</h1>
+
+<!-- images work -->
+<img width=600 height=200 src=https://placecage.com/600/200 />
+
+<!-- nested scripts appear not to execute -->
+<script>
+  console.log
+    ("this script isn't from around here")
+</script>
+

examples/include-/index.html

@@ -0,0 +1,72 @@
+<title>&lt;include-&gt;</title>
+
+<meta charset=UTF-8>
+<meta name=viewport content=width=device-width,initial-scale=1>
+
+<link rel=stylesheet href=https://devpunks.herokuapp.com/typography.css>
+
+<script src=/></script>
+<script name=polyfill src=https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.0.0/webcomponents-hi-ce.js></script>
+
+<link rel=import href=https://snuggsi.herokuapp.com/examples/header-group>
+<link rel=import href=https://snuggsi.herokuapp.com/examples/to-do/template.html>
+
+<style>
+  import-html
+    { display: block }
+</style>
+
+<header-group>
+  <h2 slot=header>&lt;include-&gt;</h2>
+  <a  slot=subheader title='See more componentexamples' href=./>See more component examples</a>
+</header-group>
+
+<to-do></to-do>
+
+<!-- YOUR CONTENT HERE -->
+
+<include- src=https://snuggsi.herokuapp.com/examples/header-group></include->
+
+<include- src=/examples/include-/html-fragment.html>
+  Import Hasn't Happened
+</include->
+
+<include- src=/examples/include-/html-fragment-footer.html></include->
+
+<script>
+  Element `include-`
+  (class extends HTMLElement {
+
+    onconnect () {
+      this.textContent = 'Content Loading...'
+      this.context.location = this.getAttribute `src`
+
+      let headers = new Headers ({ Accept: 'text/html' })
+
+      fetch (this.context.location, { mode: 'no-cors', headers })
+        .then  (response => response.text ())
+        .then  (content  => this.parse (content))
+        .catch (error    => console.warn (error))
+    }
+
+    parse (string) {
+      let
+        root = (new DOMParser)
+          .parseFromString (string, 'text/html')
+          .documentElement
+
+      , html = document.importNode (root, true)
+
+      , head = html.querySelector
+          `head`.childNodes
+
+      , body = html.querySelector
+          `body`.childNodes
+
+      this.innerHTML = ''
+      this.append ( ... [ ... head, ... body ] )
+    }
+  })
+</script>
+
+<script src=/browser-sync.es></script>

examples/include-/logo.html

@@ -0,0 +1,8 @@
+<script src=https://snuggsi.now.sh/browser-sync.es></script>
+
+<img src=https://otvet.imgsmail.ru/download/0e7a5c49ff2c78ce878f0f47aa1d186c_i-1088.jpg alt=''>
+
+<h2>Yo dog. I heard you like imports so I put an import inside your import so you can import</h2>
+<script> console.log ('this is coming from logo inside footer inside index') </script>
+
+<link rel=stylesheet href=/examples/include-/nested-nested-style.css>

examples/include-/nested-nested-style.css

@@ -0,0 +1 @@
+footer { background: green }

examples/include-/nested-style.css

@@ -0,0 +1,10 @@
+body {
+  background: red !important;
+  color: purple;
+}
+h1 {
+  color: blue;
+}
+h1:after {
+  content: ' external style too!';
+}

examples/index.html

@@ -29,6 +29,9 @@ <h3 id=html>Custom Elements</h3>
   <li>
     <a title='<hello-world>' href=/examples/hello-world>&lt;hello-world&gt;</a>
 
+  <li>
+    <a title='<include->' href=/examples/include->&lt;include-&gt;</a>
+
   <li>
     <a title='<header-group>' href=/examples/header-group/example.html>&lt;header-group&gt;</a>
 
@@ -88,4 +91,3 @@ <h3 id=components>Components</h3>
 
 
 <script src=/browser-sync.es></script>
-

index.html

@@ -655,6 +655,9 @@ <h3>Further Learning</h3>
         <li>
           <a href=/examples/hello-world>&lt;hello-world&gt;</a>
 
+        <li>
+          <a href=/examples/include->&lt;include-&gt;</a>
+
         <li>
           <a href=/examples/header-group/example.html>&lt;header-group&gt;</a>