Shadow DOM Design Constraints In Examples

Simple Component

Calendar

Constraints:

• Implementation details are not accessible using standard DOM traversal/query APIs: Node, ParentNode, Element, etc.)
• When traversing implementation details, you can't easily walk out.
• Event target values do not leak implementation details.
• Active element values do not leak implementation details.
• You can style implementation details with scoped <style> element (Early tabs control example that illustrates the need for style scoping )
• Style selectors in the document do not match inside of the implementation details
• Style selectors in the implementation details do not match in the document.

Inherited Components

Example:

Constraints: *

Component With One Insertion Point

Example:

Constraints:

Component With Several Insertion Points

Example: (tab strip)

Constraints:

• Need a way to select which children go into which insertion point.
• Let internal implementation details style children, distributed into the insertion point.
• Let internal implementation known which child is distributed into which insertion point.
• Distribution needs to happen before child style is computed

Nested Components

Example: my-editing-bar + my-zebra

Constraints:

• The outside of implementation details is not always main document. Sometimes it's the implementation details of another component.
• Another component's insertion point may end up being a child of the component.

Component Use In Real World

Examples:

Constraints:

• A way to occasionally pierce style-scoping boundaries
• A way to introspect shadow trees