Shadow root in server-side Element

Elements contain support for adding a shadow root for Element types that support it. This enables for the creation of serverside webcomponents. Elements without shadow root support

A shadow root can be created simply with the command:

Java

  1. Element element = new Element("custom-element");
  2. ShadowRoot shadowRoot = element.attachShadow();

A ShadowRoot is not an actual element and only supports child element handling and getting the host element which contains the shadow root.

Note
When adding a shadow root, any element added to the ShadowRoot parent will not be visible if the ShadowRoot doesn’t contain a <slot></slot> element. See Components in slot for more information.

All new elements should be added to the ShadowRoot element so that they will be encapsulated in the shadow tree of the hosting element.

Java

  1. @Tag("my-label")
  2. public class MyLabel extends Component {
  4.     public MyLabel() {
  5.         ShadowRoot shadowRoot = getElement().attachShadow();
  6.         Label textLabel = new Label("In the shadow");
  7.         shadowRoot.appendChild(textLabel.getElement());
  8.     }
  9. }

Missing shadow root support

  • The browser already hosts its own internal shadow DOM for the element (<textarea>, <input>).

  • It doesn’t make sense for the element to host a shadow DOM (<img>).