<!DOCTYPE html>
<html><body>

<style>
#host {
    width: 200px;
    height: 100px;
    background-color: blue;
}

#host::-webkit-scrollbar {
   width: 50px;
}

#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.webkitCreateShadowRoot();
shadowRoot.applyAuthorStyles = true;
shadowRoot.innerHTML = '<div id="div1">some long text showing scrollbar</div>';
</script>

</body></html>