soft-navigation-detection-web-component-lifecycle.tentative.html (1306B)
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Detect simple soft navigation.</title> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <script src="/resources/testdriver.js"></script> 9 <script src="/resources/testdriver-vendor.js"></script> 10 <script src="resources/soft-navigation-helper.js"></script> 11 </head> 12 <body> 13 <script> 14 // Define a custom element 15 class SPAContent extends HTMLDivElement { 16 constructor() { 17 super(); 18 } 19 connectedCallback() { 20 // Change the URL 21 history.pushState({}, '', "/foobar.html"); 22 } 23 } 24 customElements.define("spa-content", SPAContent, { extends: "div"}); 25 26 </script> 27 <main id=main> 28 <a id=link>Click me!</a> 29 </main> 30 <script> 31 testSoftNavigation({ 32 testName: "Test that a soft navigation is detected when the click is done " 33 + "on a custom element.", 34 addContent: () => { 35 const main = document.getElementById("main"); 36 const spaContent = document.createElement("div", {is: "spa-content"}); 37 const content = document.createTextNode("Lorem Ipsum"); 38 spaContent.appendChild(content); 39 main.appendChild(spaContent); 40 }, 41 pushState: () => {}, 42 }); 43 </script> 44 </body> 45 </html>