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>28 <div class="paragraph">Este es el contenido de un párrafo :)</div>29 <div class="paragraph">Este es el contenido de un párrafo :)</div>30 <div class="paragraph">Este es el contenido de un párrafo :)</div>31 <div class="paragraph">Este es el contenido de un párrafo :)</div>32 </div>33 34 <script type="text/javascript">35 function templatize(root, template) {36 var _root = root.createShadowRoot();37 _root.appendChild(document.importNode(template.content, true));38 //_root.appendChild(template.content);39 }40 41 var template = document.querySelector('#template-paragraph');42 43 var paragraphs = document.querySelectorAll('.paragraph');44 for(var i=0; i<paragraphs.length; i++) {45 templatize(paragraphs[i], template);46 }47 48 49 50 /*51 var paragraph = document.querySelector('.paragraph');52 var _paragraph = paragraph.createShadowRoot();53 var template = document.querySelector('#template-paragraph');54 var clone = document.importNode(template.content, true);55 _paragraph.appendChild(clone);56 */57 </script>58 59 <style type="text/css">60 #editor {61 max-width: 400px;62 margin: 0 auto;63 }64 65 #editor:focus {66 outline: none;67 }68 69 #editor {70 border: solid 1px silver;71 padding: 4px;72 }73 74 template {75 color: red;76 }77 </style>78 Este ShareCode tiene versiones:
- Shadow DOM .marker { ... (04/04/2015)
- Shadow DOM .marker { ... (18/09/2021)
Enlace
El enlace para compartir es: