No al cierre de webs
ShareCode
Permalink: http://www.treeweb.es/u/974/ 01/02/2011

ShareCode

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:
  1. Shadow DOM .marker { ... (04/04/2015)
  2. Shadow DOM .marker { ... (18/09/2021)
Enlace
El enlace para compartir es: