<p class="hostElement"></p>
<div>
  <input id="myRange" type="range">
  <span>slider without style</span>
</div>

<div>
  <input id="myRange" class="bar" type="range">
  <span>slider with bar style</span>
</div>

<div>
  <input id="myRange" class="bar thumb" type="range">
  <span>slider using psuedo-element identifier</span>
</div>
input[type=range].bar {
    -webkit-appearance: none;
    background-color: Red;
    width: 200px;
}

input[type=range].thumb::-webkit-slider-thumb {
  -webkit-appearance: none;
  background-color: Yellow;
  opacity: 0.8;
  width: 10px;
  height: 40px;
}
var shadow = document.querySelector('.hostElement')
             .attachShadow({mode: 'open'});
shadow.innerHTML = '<span>This is Shadow DOM</span>';
shadow.innerHTML += '<style>span { color: red; background: lightblue; }</style>';
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.