Separate Content from Presentation using Shadow DOM

Question

Reference: HTML5Rocks Shadow DOM 101

Question: How can I replace contents of <content></content from the #nameTagTemplate template?

Problem: Currently my javascript replaces all of the template elements.

HTML

<div class="todo">Hey I'm a todo app</div>
<template id="nameTagTemplate">
    <style>
      .outer {
        border: 2px solid brown;
      }
    </style>
    <div class="outer">
      <div class="boilerplate">
        Hi! My name is
      </div>
      <div class="name">
        <content></content>
      </div>
    </div>
</template>

js file

var todoEl = document.querySelector('.todo');
var template = document.querySelector('#nameTagTemplate');
var clone = document.importNode(template.content, true);
var root = todoEl.createShadowRoot()
root.appendChild(clone);
root.textContent = 'Shellie'; // this line replaces all nodes in template.
// I would like root.textContent to just replace the content tag elements.

Comment: Update still doesnt work

// template logic goes here
var todoEl = document.querySelector('.todo');
var template = document.querySelector('#nameTagTemplate');
var clone = document.importNode(template.content, true);
clone.getElementsByTagName("content")[0].textContent='123';
var root = todoEl.createShadowRoot();
root.appendChild(clone);

Answer 1

So if you edit the textContent of the .todo element then it works as expected.

var todoEl = document.querySelector('.todo');
var template = document.querySelector('#nameTagTemplate');
var clone = document.importNode(template.content, true);
var root = todoEl.createShadowRoot();
root.appendChild(clone);
todoEl.textContent = 'Shellie';

 var todoEl = document.querySelector('.todo'); var template = document.querySelector('#nameTagTemplate'); var clone = document.importNode(template.content, true); var root = todoEl.createShadowRoot(); root.appendChild(clone); todoEl.textContent = 'Shellie'; 

 <div class="todo">Hey I'm a todo app</div> <template id="nameTagTemplate"> <style> .outer { border: 2px solid brown; } </style> <div class="outer"> <div class="boilerplate"> Hi! My name is </div> <div class="name"> <h3><content></content></h3> </div> </div> </template> 

In the html5rocks article this is done by querying for the DOM element when the button was clicked. It also says " the insertion point cherry-picks content from the shadow host to present at that point ", which means the content on the shadow host is what lives inside of the <content></content> element.