| <!DOCTYPE html> |
| <style> |
| span::selection { background-color: rgba(63, 128, 33, 0.95); color: yellow; } |
| </style> |
| <body onload="SelectText()"> |
| <div id="container"> |
| <span>DOM </span> |
| <div id="shadowDiv" style="display:inline"></div> |
| <span> DOM</span> |
| </div> |
| <div> |
| Above Textual Selection should have Green background and yellow color on "DOM" <br> |
| and Red background, Green color on "Shadow DOM". |
| </div> |
| </body> |
| <script> |
| var host = document.getElementById('shadowDiv'); |
| var root = host.createShadowRoot(); |
| root.innerHTML = '<style> span::selection { background-color: rgba(255, 0, 0, 0.95); color: green; } </style>' + |
| '<span>Shadow DOM </span>'; |
| |
| function SelectText() { |
| var ele = document.getElementById('container'); |
| var selection = window.getSelection(); |
| selection.setBaseAndExtent(ele.childNodes[1], 0, ele.childNodes[5], 1); |
| } |
| </script> |
