334829-1a-shadow.xhtml

Enable keyboard shortcuts

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

  <script type="application/x-javascript">

    customElements.define("custom-element", class extends HTMLElement {

      constructor() {

        super();

        const template = document.getElementById("template");

        const shadowRoot = this.attachShadow({mode: "open"})

          .appendChild(template.content.cloneNode(true));

});

    function runTest() {

      var div = document.getElementById("testDiv");

      // First we have to make sure that we've looked up the primary frame for

      // the textnode.  Appending a space should do the trick.

      div.firstChild.data += " ";

      // Now flush our reflow

      document.body.offsetWidth;

      var node = document.createElementNS("http://www.w3.org/1999/xhtml",

                                          "span");

      div.appendChild(node);

      node.appendChild(document.createTextNode("This text should appear"));

  </script>

</head>

<body onload="runTest()">

<template id="template"><span><slot/></span></template>

<custom-element id="testDiv" style="width: 0; display: block;">This is text in a div</custom-element>

</body>

</html>