| <!DOCTYPE html> |
| <html> |
| <head> |
| <style> |
| body, input { |
| border: 0; |
| margin: 0; |
| padding: 0; |
| font: 16px sans-serif; |
| } |
| </style> |
| </head> |
| <body> |
| <template> |
| <style> |
| span::selection { background: rgba(255, 0, 0, 0.95); } |
| </style> |
| <span> |
| Some hearts are diamonds some hearts are stones |
| </span> |
| </template> |
| <input> |
| <script> |
| var input = document.querySelector('input'); |
| var template = document.querySelector('template'); |
| var root = input.createShadowRoot(); |
| root.appendChild(template.content); |
| var span = root.querySelector('span'); |
| |
| var selection = window.getSelection(); |
| var range = document.createRange(); |
| range.selectNodeContents(span); |
| selection.addRange(range); |
| </script> |
| </body> |
| </html> |
