void SetupHtmlMenuBox() { //================================================== this.htmlMenuBox = new HtmlBox(htmlhost, 800, 40); htmlMenuBox.SetLocation(30, 0); _host.AddChild(htmlMenuBox); string html = @"<html><head></head><body> <div id='menubox'> <span id='test_dom1'>click to toggle!</span> <span id='test_dom2'>test document fragment</span> <span id='test_dom3'>test showdow dom</span> </div> </body></html>"; htmlMenuBox.LoadHtmlString(html); //set event handlers var htmldoc = htmlMenuBox.HtmlDoc; var div_menuBox = htmldoc.getElementById("menubox") as IHtmlElement; if (div_menuBox == null) { return; } //test set innerHTML div_menuBox.attachEventListener("mousedown", (e) => { var contextE = e.SourceHitElement as IHtmlElement; switch (contextE.id) { case "test_dom1": { //test toggle with innerHTML IHtmlDocument testHtmlDoc = testHtmlBox.HtmlDoc; var div1 = testHtmlDoc.getElementById("div1") as IHtmlElement; if (div1 != null) { //test set innerHTML div1.innerHTML = testToggle ? "<div>11111</div>" : "<div>22222</div>"; testToggle = !testToggle; } } break; case "test_dom2": { //test toggle with DocumentFragment IHtmlDocument testHtmlDoc = testHtmlBox.HtmlDoc; var div1 = testHtmlDoc.getElementById("div1") as IHtmlElement; if (div1 != null) { var docFragment = testHtmlDoc.createDocumentFragment(); if (testToggle) { var node1 = docFragment.createElement("div") as IHtmlElement; node1.appendChild( docFragment.createTextNode("3333")); //TODO: review this docFragment.rootNode.appendChild(node1); } else { var node1 = docFragment.createElement("div") as IHtmlElement; node1.appendChild( docFragment.createTextNode("4444")); //TODO: review this docFragment.rootNode.appendChild(node1); } div1.clear(); div1.appendChild(docFragment.rootNode); testToggle = !testToggle; } } break; case "test_dom3": { //shadow dom! IHtmlDocument testHtmlDoc = testHtmlBox.HtmlDoc; var div1 = testHtmlDoc.getElementById("div1") as IHtmlElement; if (div1 != null) { var shadowRoot = testHtmlDoc.createShadowRootElement() as IHtmlElement; if (testToggle) { var node1 = testHtmlDoc.createElement("div") as IHtmlElement; node1.appendChild( testHtmlDoc.createTextNode("XXX")); //TODO: review this //add node1 to shadow root element shadowRoot.appendChild(node1); } else { var node1 = testHtmlDoc.createElement("div") as IHtmlElement; node1.appendChild( testHtmlDoc.createTextNode("YYY")); //TODO: review this //add node1 to shadow root element shadowRoot.appendChild(node1); } div1.clear(); div1.appendChild(shadowRoot); testToggle = !testToggle; } } break; } }); }