1 <h1>Shadow DOM</h1>2 3 <template id="template-paragraph">4 <style>5 .marker {6 color: silver;7 position: absolute;8 margin-left: -100px;9 width: 90px;10 text-align: right;11 }12 13 .marker::selection {14 background: transparent;15 }16 17 .marker:hover {18 color: red;19 }20 </style>21 <p id="container">22 <div class="marker">H1</div>23 <content></content>24 </p>25 </template>26 27 <div id="editor" contentEditable><div class="paragraph">Este es el contenido de un párrafo :)</div><div class="paragraph">Este es el contenido de un párrafo :)</div><div class="paragraph">Este es el contenido de un párrafo :)</div><div class="paragraph">Este es el contenido de un párrafo :)</div></div>28 29 <script type="text/javascript">30 function templatize(root, template) {31 var _root = root.createShadowRoot();32 _root.appendChild(document.importNode(template.content, true));33 //_root.appendChild(template.content);34 }35 36 var template = document.querySelector('#template-paragraph');37 38 var paragraphs = document.querySelectorAll('.paragraph');39 for(var i=0; i<paragraphs.length; i++) {40 templatize(paragraphs[i], template);41 }42 43 var editor = document.querySelector('#editor');44 45 function traverse(item) {46 var children = [];47 var l = item.childNodes.length;48 for (var i=0; i<l; i++) {49 children.push(traverse(item.childNodes[i]));50 }51 52 return {53 item: item,54 type: item.nodeType,55 children: children,56 } 57 }58 59 60 console.log(traverse(editor));61 62 /*63 var paragraph = document.querySelector('.paragraph');64 var _paragraph = paragraph.createShadowRoot();65 var template = document.querySelector('#template-paragraph');66 var clone = document.importNode(template.content, true);67 _paragraph.appendChild(clone);68 */69 </script>70 71 <style type="text/css">72 #editor {73 max-width: 400px;74 margin: 0 auto;75 }76 77 #editor:focus {78 outline: none;79 }80 81 #editor {82 border: solid 1px silver;83 padding: 4px;84 }85 86 template {87 color: red;88 }89 </style>90 Enlace
El enlace para compartir es: