| <!DOCTYPE html> |
| <html><body> |
| |
| <style> |
| #host { |
| width: 200px; |
| height: 100px; |
| background-color: blue; |
| } |
| |
| #host::-webkit-scrollbar { |
| width: 50px; |
| } |
| |
| </style> |
| <style id="shadow-style"> |
| #div1 { |
| position: fixed; |
| overflow: scroll; |
| width: 80px; |
| height: 80px; |
| background-color: red; |
| } |
| |
| #div1::-webkit-scrollbar { |
| width: 20px; |
| } |
| </style> |
| |
| <div id="host"></div> |
| |
| |
| <script> |
| var shadowRoot = host.attachShadow({mode: 'open'}); |
| shadowRoot.innerHTML = '<div id="div1">some long text showing scrollbar</div>'; |
| shadowRoot.appendChild(document.querySelector('#shadow-style')); |
| </script> |
| |
| </body></html> |
