Web Component Content Insertion Points

index.html

<ot-site>
  <div head>
    I render in head.
  </div>
  <div menu>
    I render in menu.
  </div>
  <div body>
    I render in body.
  </div>
</ot-site>

<!-- not registering this custom element in this demo, but it works anyway -->

script.babel

// get the shadow-host-to-be
var $ = document.querySelector.bind(document)
var host = $("ot-site");

// make it a shadow host
// by creating a shadow root
var root = host.createShadowRoot();

// put some elements in it the old-fashioned way
root.innerHTML = `
  <div id="site">
    <header>
      <svg class="logo" viewBox="0 0 608.5 135">
        <path class="gui-logo--text" fill="currentColor" d="M118.5 0C81.3 0 51 30.2 51 67.5c0 37.3 30.2 67.5 67.5 67.5 37.3 0 67.5-30.2 67.5-67.5C186 30.2 155.8 0 118.5 0zM118.5 84.4c-9.3 0-16.9-7.6-16.9-16.9 0-9.3 7.6-16.9 16.9-16.9s16.9 7.6 16.9 16.9C135.4 76.8 127.8 84.4 118.5 84.4zM0 67.5c0-9.3 7.6-16.9 16.9-16.9 9.3 0 16.9 7.6 16.9 16.9 0 9.3-7.6 16.9-16.9 16.9C7.6 84.4 0 76.8 0 67.5"/>
        <path class="gui-logo--text" fill="currentColor" d="M347.3 54.6c10 0 17.7 7.4 17.7 17.9 0 0.6-0.1 1.9-0.2 2.5 -0.1 1-1 1.8-1.8 1.8h-24.7c0.1 4.8 4 8.9 9.6 8.9 3.8 0 6.5-1.4 8.3-2.8 0.9-0.8 1.9-0.8 2.5 0l3.3 4.3c0.7 0.8 0.8 1.7-0.2 2.5 -3.3 2.8-8.1 5.3-14.4 5.3 -11.5 0-19.5-9.2-19.5-20.2C327.9 63.8 335.9 54.6 347.3 54.6zM354.5 69.8c-0.2-3.8-3.2-6.7-7.4-6.7 -4.7 0-7.7 2.8-8.2 6.7H354.5zM448 39.7h-39.3c-0.9 0-1.6 0.8-1.6 1.6v6.8c0 0.8 0.7 1.6 1.6 1.6h14.2v42.7c0 0.8 0.8 1.6 1.6 1.6h7.8c0.8 0 1.6-0.8 1.6-1.6V49.7H448c0.9 0 1.6-0.8 1.6-1.6v-6.8C449.6 40.4 448.9 39.7 448 39.7zM507.1 54.6c-3.8 0-7.7 0.9-9.4 1.7V41.5c0-0.9-0.8-1.8-1.8-1.8H489c-0.9 0-1.8 0.9-1.8 1.8v50.6c0 1 0.9 1.8 1.8 1.8h2.9c0.1 0 0.1 0 0.2 0h0.8c1 0 1.9-0.8 1.9-1.8v-2.9l0-0.1c0 0 4.4 5.8 12.9 5.8 10.5 0 18.1-9.2 18.1-20.2C525.8 63.4 518.5 54.6 507.1 54.6zM506.1 85.4c-5 0-7.7-3.2-8.5-5.3V66.2c0 0 3.2-2.2 8-2.2 6.3 0 9.6 5.2 9.6 10.6C515.2 80.1 512.2 85.4 506.1 85.4zM571.5 54.6c10 0 17.7 7.4 17.7 17.9 0 0.6-0.1 1.9-0.2 2.5 -0.1 1-1 1.8-1.8 1.8h-24.7c0.1 4.8 4 8.9 9.6 8.9 3.8 0 6.5-1.4 8.3-2.8 0.9-0.8 1.9-0.8 2.5 0l3.3 4.3c0.7 0.8 0.8 1.7-0.2 2.5 -3.3 2.8-8.1 5.3-14.4 5.3 -11.5 0-19.5-9.2-19.5-20.2C552 63.8 560.1 54.6 571.5 54.6zM578.7 69.8c-0.2-3.8-3.2-6.7-7.4-6.7 -4.7 0-7.7 2.8-8.2 6.7H578.7zM303.3 54.6c-7.9 0-12.3 5.4-12.6 5.7v-3.1c0-1-0.8-1.8-1.8-1.8h-4.1c-1 0-1.8 0.8-1.8 1.8v50.6c0 0.9 0.8 1.8 1.8 1.8h6.8c0.9 0 1.8-0.9 1.8-1.8V93.3c1.8 0.7 5.4 1.6 9.3 1.6 11.5 0 19.1-8.9 19.1-20.1C321.8 63.1 313.8 54.6 303.3 54.6zM301.4 85.4c-4.8 0-8-2.2-8-2.2V69.4c0.8-2.2 3.5-5.3 8.5-5.3 6 0 9.1 5.3 9.1 10.7C311 80.2 307.7 85.4 301.4 85.4zM393.3 54.6c-7.4 0-11 4-12.4 5.6v-2.9c0-1-0.8-1.8-1.8-1.8h-4.4c-0.9 0-1.8 0.8-1.8 1.8v34.9c0 1 0.9 1.8 1.8 1.8h6.2c1.8 0 2.4-0.4 2.4-1.8v-22c0.9-2.7 3.3-6 8.4-6 4.7 0 6.7 3.1 6.7 8.1v20c0 1 0.8 1.8 1.8 1.8h6.8c0.9 0 1.8-0.8 1.8-1.8v-20C408.8 62.8 405.6 54.6 393.3 54.6zM463.4 54.6c-6.3 0-12.4 1.6-13.2 1.9 -0.8 0.3-1.6 0.9-1.3 2.3l0.8 4.3c0.2 1.2 0.9 2.1 2.2 1.7 2.3-0.7 7.3-1.4 10.9-1.4 4.1 0 5.5 2.3 5.3 7.3 0 0-3.5-1.1-7.4-1.1 -9.8 0-15.4 5.3-15.4 12.1 0 8.3 5.3 13.2 13 13.2 6 0 9.9-2.7 12.1-4.8v2.1c0 1 0.8 1.8 1.8 1.8h0.7c0.1 0 0.2 0 0.2 0h2.8c1 0 1.8-0.8 1.8-1.8V71.3C477.9 60.8 475.4 54.6 463.4 54.6zM467.9 83c-0.5 1.4-3.5 4.1-6.9 4.1 -3.6 0-5.6-2.2-5.6-5.4 0-3.4 2.4-5.5 6.8-5.5 3.1 0 5.7 1.2 5.7 1.2V83zM247.6 39.7c-15.2 0-27.6 12.5-27.6 27.8 0 15.5 12.1 27.6 27.6 27.6 15.5 0 27.7-12.1 27.7-27.6C275.3 52.2 262.9 39.7 247.6 39.7zM247.6 50.5c9.2 0 17 7.8 17 17 0 9.3-7.6 16.9-17 16.9 -9.3 0-16.9-7.6-16.9-16.9C230.7 58.1 238.3 50.5 247.6 50.5zM545.2 94c1 0 1.8-0.8 1.8-1.8l0-6.8c0-1-0.8-1.8-1.8-1.8l-0.3 0c-0.8 0-1.7-0.8-1.7-1.7l0-0.3V41.7c0-0.9-0.9-1.8-1.8-1.8h-6.8c-0.9 0-1.8 0.9-1.8 1.8v44.6l0 1.2c0 3.3 3.3 6.6 6.6 6.6L545.2 94zM592.7 56.2h-3.1v-1.6h8.1v1.6h-3.1V64h-1.9V56.2zM599.2 54.6h2.3l1.5 3.5 0.9 2.4h0.1l0.9-2.4 1.4-3.5h2.2V64h-1.7v-4.2l0.2-3.2h-0.1l-2.3 5.9h-1.5l-2.3-5.9h-0.1l0.2 3.2V64h-1.7V54.6z"/>
      </svg>
      <content select="[head]" />
    </header>
    <nav>
      <content select="[menu]" />
    </nav>
    <main>
      <content select="[body]" />
    </main>
    <footer>
      © 2015 OpenTable, Inc.
    </footer>
  </div>
`;

// it won't be styled unless
// we add css to the shadow dom
// because a shadow dom is encapsulated
// and styles are scoped
root.innerHTML += `
  <style>@import "http://codepen.io/morewry/pen/xbzdJB.css";</style>
`;

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/0.5.5/webcomponents.min.js"></script>

style.scss

// unfortunately, unless we're going to use positioning (bleh)
// we have to reset margin/padding and set height to cooperate with ot-site
html,body{margin:0;padding:0;height:100%;}

Web Component Content Insertion Points.markdown

Web Component Content Insertion Points

ng-conf 2015. Custom Content: Template Insertion in Web Components and Angular by Rachael L Moore and Kara Erickson. Code demo for web component segment of the talk about combining user provided content with pre-defined templates using the Shadow DOM and content insertion points. This is the canonical example.

Forked from Rachael L Moore's Pen Web Component Content Insertion Points.

A Pen by JBreit on CodePen.

License.