Examples with ShadowRoot com.vaadin.flow.dom.ShadowRoot used on opensource projects

Example 1 with ShadowRoot

use of com.vaadin.flow.dom.ShadowRoot in project flow by vaadin.

the class AttachExistingElementView method onShow.

@Override
protected void onShow() {
    setId("root-div");
    NativeButton attachLabel = new NativeButton("Attach label", event -> getElement().getStateProvider().attachExistingElement(getElement().getNode(), "label", null, this::handleLabel));
    attachLabel.setId("attach-label");
    add(attachLabel);
    NativeButton attachHeader = new NativeButton("Attach Header", event -> getElement().getStateProvider().attachExistingElement(getElement().getNode(), "h1", null, this::handleHeader));
    attachHeader.setId("attach-header");
    add(attachHeader);
    Div div = new Div();
    div.setId("element-with-shadow");
    ShadowRoot shadowRoot = div.getElement().attachShadow();
    NativeButton attachLabelInShadow = new NativeButton("Attach label in shadow", event -> shadowRoot.getStateProvider().attachExistingElement(shadowRoot.getNode(), "label", null, this::handleLabelInShadow));
    attachLabelInShadow.setId("attach-label-inshadow");
    add(attachLabelInShadow);
    NativeButton attachNonExistingElement = new NativeButton("Attach non-existing element", event -> getElement().getStateProvider().attachExistingElement(getElement().getNode(), "image", null, new NonExistingElementCallback()));
    attachNonExistingElement.setId("non-existing-element");
    add(attachNonExistingElement);
    add(div);
    getPage().executeJavaScript("$0.appendChild(document.createElement('label'));", shadowRoot);
    getPage().executeJavaScript("$0.appendChild(document.createElement('span')); $0.appendChild(document.createElement('label'));" + "$0.appendChild(document.createElement('h1'));", getElement());
}

Example 2 with ShadowRoot

use of com.vaadin.flow.dom.ShadowRoot in project flow by vaadin.

the class ShadowRootStateProvider method visit.

@Override
public void visit(StateNode node, NodeVisitor visitor) {
    ShadowRoot shadowRoot = ShadowRoot.get(node);
    boolean visitDescendants = visitor.visit(shadowRoot);
    if (visitDescendants) {
        visitDescendants(shadowRoot, visitor);
    }
}

Example 3 with ShadowRoot

use of com.vaadin.flow.dom.ShadowRoot in project flow by vaadin.

the class ElementTest method attachShadowRoot_shadowRootCreatedAndChildrenArePreserved.

@Test
public void attachShadowRoot_shadowRootCreatedAndChildrenArePreserved() {
    Element element = ElementFactory.createDiv();
    Element button = ElementFactory.createButton();
    Element emphasis = ElementFactory.createEmphasis();
    element.appendChild(button, emphasis);
    ShadowRoot shadow = element.attachShadow();
    Assert.assertNotNull(shadow);
    Assert.assertEquals(element, shadow.getHost());
    Assert.assertEquals(shadow, element.getShadowRoot().get());
    Assert.assertEquals(2, element.getChildCount());
    Assert.assertEquals(2, element.getChildren().count());
    Assert.assertEquals(button, element.getChild(0));
    Assert.assertEquals(emphasis, element.getChild(1));
}

Example 4 with ShadowRoot

use of com.vaadin.flow.dom.ShadowRoot in project flow by vaadin.

the class ElementTest method getParentNode_elementInShadowRoot_parentIsNull.

@Test
public void getParentNode_elementInShadowRoot_parentIsNull() {
    ShadowRoot element = ElementFactory.createDiv().attachShadow();
    Element child = ElementFactory.createDiv();
    element.appendChild(child);
    Assert.assertNull(child.getParent());
    Assert.assertEquals(element, child.getParentNode());
}

Example 5 with ShadowRoot

use of com.vaadin.flow.dom.ShadowRoot in project flow by vaadin.

the class ShadowRootView method onShow.

@Override
protected void onShow() {
    Div div = new Div();
    div.getElement().setAttribute("id", "test-element");
    add(div);
    ShadowRoot shadowRoot = div.getElement().attachShadow();
    Element shadowDiv = ElementFactory.createDiv();
    shadowDiv.setText("Div inside shadow DOM");
    shadowDiv.setAttribute("id", "shadow-div");
    shadowRoot.appendChild(shadowDiv);
    Element shadowLabel = ElementFactory.createLabel("Label inside shadow DOM");
    shadowLabel.setAttribute("id", "shadow-label");
    shadowRoot.appendChild(shadowLabel);
    NativeButton removeChild = new NativeButton("Remove the last child from the shadow root", event -> shadowRoot.removeChild(shadowLabel));
    removeChild.setId("remove");
    add(removeChild);
}