| OLD | NEW |
|---|
| 1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
| 2 <html> | 2 <html> |
| 3 <head> | 3 <head> |
| 4 <style> | 4 <style> |
| 5 body, input { | 5 body, #host { |
| 6 border: 0; | 6 border: 0; |
| 7 margin: 0; | 7 margin: 0; |
| 8 padding: 0; | 8 padding: 0; |
| 9 font: 16px sans-serif; | 9 font: 16px sans-serif; |
| 10 } | 10 } |
| 11 </style> | 11 </style> |
| 12 </head> | 12 </head> |
| 13 <body> | 13 <body> |
| 14 <template> | 14 <template> |
| 15 <style> | 15 <style> |
| 16 span::selection { background: rgba(255, 0, 0, 0.95); } | 16 span::selection { background: rgba(255, 0, 0, 0.95); } |
| 17 </style> | 17 </style> |
| 18 <span> | 18 <span> |
| 19 Some hearts are diamonds some hearts are stones | 19 Some hearts are diamonds some hearts are stones |
| 20 </span> | 20 </span> |
| 21 </template> | 21 </template> |
| 22 <input> | 22 <div id=host></div> |
| 23 <script> | 23 <script> |
| 24 var input = document.querySelector('input'); | 24 var host = document.querySelector('#host'); |
| 25 var template = document.querySelector('template'); | 25 var template = document.querySelector('template'); |
| 26 var root = input.createShadowRoot(); | 26 var root = host.createShadowRoot(); |
| 27 root.appendChild(template.content); | 27 root.appendChild(template.content); |
| 28 var span = root.querySelector('span'); | 28 var span = root.querySelector('span'); |
| 29 | 29 |
| 30 var selection = window.getSelection(); | 30 var selection = window.getSelection(); |
| 31 var range = document.createRange(); | 31 var range = document.createRange(); |
| 32 range.selectNodeContents(span); | 32 range.selectNodeContents(span); |
| 33 selection.addRange(range); | 33 selection.addRange(range); |
| 34 </script> | 34 </script> |
| 35 </body> | 35 </body> |
| 36 </html> | 36 </html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 1751953003:
Remove the support of multiple shadow roots with a user agent shadow root (Closed)
Base URL: https://chromium.googlesource.com/chromium/src.git@master