Untitled

<!DOCTYPE html>
<html>

  <head>
    <style>
      #content {
        border: 1px solid grey;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
      }
    </style>
  </head>

  <body id="body-id">
    <template id="my-component">
      <style>
        .spacer {
          background-color: lightgrey;
          height: 50px;
        }
        .relative {
          position: relative;
        }
      </style>
      <div class="spacer">
        Some space to show that the content below 
        is not positionned relative to the body
      </div>
      <div id="relative-div-id" class="relative">
        <slot></slot>
      </div>
    </template>
    
    <my-component>
      <div id="content">
        Some content with position: absolute<br>
        Our offset parent is expected to be #relative-div-id<br>
        The element returned by .offsetParent is #</div>
    </my-component>
    
    <script src="script.js"></script>

  </body>

</html>

customElements.define('my-component',
  class extends HTMLElement {
    constructor() {
      super();
      const template = document.getElementById('my-component');
      const templateContent = template.content;
      this.attachShadow({ mode: 'open' })
        .appendChild(templateContent.cloneNode(true));
    }
  })

function testOffsetParent() {
  const contentDiv = document.getElementById('content');
  const offsetParentId = contentDiv.offsetParent.id;
  contentDiv.innerHTML += offsetParentId;
  console.log('content\'s computed offsetParent is #' + offsetParentId);
}

// wait for pluncker frame to be dsisplayed
setTimeout(testOffsetParent, 100);