Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<!-- <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> -->
<!-- <script src="//code.jquery.com/jquery-git1.js"></script> -->
<!-- <script src="//code.jquery.com/jquery-git2.js"></script> -->
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<style>
  div, html /deep/ div {
    width: 100px; 
    height: 100px;
    margin: 10px;
    background-color: rgb(237, 240, 243);
  }
</style>
<script>
  console.clear();
  document.write('jQuery version: ' + jQuery.fn.jquery);
  var element = document.createElement('div');
  var shadowContainer = document.createElement('section');
  if (!shadowContainer.createShadowRoot) {
    var msg = "This browser doesn't have a native shadow dom and is thus unaffected by the bug.";
    document.body.textContent = msg;
    throw msg;
  }
  var shadowRoot = shadowContainer.createShadowRoot();
  var shadowElement = document.createElement('div');
  
  document.body.appendChild(element);
  shadowRoot.appendChild(shadowElement);
  document.body.appendChild(shadowContainer);
  
  
  element.textContent = JSON.stringify(
    $(element).position(), null, 2);
  shadowElement.textContent = JSON.stringify(
    $(shadowElement).position(), null, 2);
    
  console.log('jQuery#position() yields: ',
              $(shadowElement).position());
  console.log('jQuery#offset() yields: ',
              $(shadowElement).offset())
  console.log('Element#getBoundingClientRect() yields: ',
              shadowElement.getBoundingClientRect());
  
  console.log('jQuery.contains(document, shadowElement): ',
              $.contains(document, shadowElement));
  console.log('document.contains(shadowElement): ',
              document.contains(shadowElement));
  console.log('shadowAwareContains(document, shadowElement',
              shadowAwareContains(document, shadowElement));
  
  function shadowAwareContains(x, y) {
    var elem = y;
    while(elem) {
      if (x === elem) {
        return true;
      }
      elem = elem.parentNode || elem.host;
    }
    return false;
  }
</script>
</body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
ricticpro
0viewers