| <script> |
| function appendElement(parentId, childId) { |
| var child = document.createElement("div"); |
| child.id = childId; |
| document.getElementById(parentId).appendChild(child); |
| } |
| |
| function modifyAttribute(elementId, name, value) { |
| var element = document.getElementById(elementId); |
| element.setAttribute(name, value); |
| } |
| |
| function modifyAttrNode(elementId, name, value) { |
| var element = document.getElementById(elementId); |
| element.attributes[name].value = value; |
| } |
| |
| function setAttrNode(elementId, name, value) { |
| var element = document.getElementById(elementId); |
| var attr = document.createAttribute(name); |
| attr.value = value; |
| element.attributes.setNamedItem(attr); |
| } |
| |
| function modifyStyleAttribute(elementId, name, value) { |
| var element = document.getElementById(elementId); |
| element.style.setProperty(name, value); |
| } |
| |
| function removeElement(elementId) { |
| var element = document.getElementById(elementId); |
| element.parentNode.removeChild(element); |
| } |
| |
| function setInnerHTML(elementId, html) { |
| var element = document.getElementById(elementId); |
| element.innerHTML = html; |
| } |
| |
| function breakDebugger() { |
| debugger; |
| } |
| |
| function authorShadowRoot() { |
| return document.getElementById("hostElement").shadowRoot; |
| } |
| |
| function authorShadowElement(id) { |
| return authorShadowRoot().getElementById(id); |
| } |
| |
| function appendElementToAuthorShadowTree(parentId, childId) { |
| var child = document.createElement("div"); |
| child.id = childId; |
| authorShadowElement(parentId).appendChild(child); |
| } |
| |
| function appendElementToOpenShadowRoot(childId) { |
| var child = document.createElement("div"); |
| child.id = childId; |
| authorShadowRoot().appendChild(child); |
| } |
| </script> |
| <div id="rootElement" style="color: red"> |
| <div id="elementToRemove"></div> |
| </div> |
| <div id="hostElement"></div> |
| <script> |
| var root = document.getElementById("hostElement").createShadowRoot(); |
| root.innerHTML = "<div id='outerElement' style='red'><input id='input'/></div>"; |
| </script> |