| OLD | NEW | 
|   1 <!DOCTYPE html> |   1 <!DOCTYPE html> | 
|   2 <html><body> |   2 <html><body> | 
|   3  |   3  | 
|   4 <style> |   4 <style> | 
|   5 #host { |   5 #host { | 
|   6     width: 200px; |   6     width: 200px; | 
|   7     height: 100px; |   7     height: 100px; | 
|   8     background-color: blue; |   8     background-color: blue; | 
|   9 } |   9 } | 
|  10  |  10  | 
|  11 #host::-webkit-scrollbar { |  11 #host::-webkit-scrollbar { | 
|  12    width: 50px; |  12    width: 50px; | 
|  13 } |  13 } | 
|  14  |  14  | 
|  15 * /shadow-deep/ #div1 { |  15 * /deep/ #div1 { | 
|  16    position: fixed; |  16    position: fixed; | 
|  17    overflow: scroll; |  17    overflow: scroll; | 
|  18    width: 80px; |  18    width: 80px; | 
|  19    height: 80px; |  19    height: 80px; | 
|  20    background-color: red; |  20    background-color: red; | 
|  21 } |  21 } | 
|  22  |  22  | 
|  23 * /shadow-deep/ #div1::-webkit-scrollbar { |  23 * /deep/ #div1::-webkit-scrollbar { | 
|  24    width: 20px; |  24    width: 20px; | 
|  25 } |  25 } | 
|  26 </style> |  26 </style> | 
|  27  |  27  | 
|  28 <div id="host"></div> |  28 <div id="host"></div> | 
|  29  |  29  | 
|  30 <script> |  30 <script> | 
|  31 var shadowRoot = host.createShadowRoot(); |  31 var shadowRoot = host.createShadowRoot(); | 
|  32 shadowRoot.innerHTML = '<div id="div1">some long text showing scrollbar</div>'; |  32 shadowRoot.innerHTML = '<div id="div1">some long text showing scrollbar</div>'; | 
|  33 </script> |  33 </script> | 
|  34  |  34  | 
|  35 </body></html> |  35 </body></html> | 
| OLD | NEW |