A sample general-purpose base class for defining custom elements that mixes in some common features: template stamping into a shadow root, shadow element references, marshalling attributes to properties, and retrieving the children distributed to a component.

This base class is not special in any way, and is defined only as a convenient shorthand for applying the mixins listed above. You can use this class as a base class for your own elements, or easily create your own base class by applying the same set of mixins.

The ElementBase base class does not register itself as a custom element with the browser, and hence cannot be independently instantiated.

Kind: global class Mixes: AttributeMarshalling , Composable , DistributedChildren , ShadowElementReferences , ShadowTemplate

• ElementBase
  • .compose(...mixins)
  • .distributedChildNodes : Array.<Node>
  • .distributedChildren : Array.<HTMLElement>
  • .distributedTextContent : string
  • .reflectAttribute(attribute, value)
  • .reflectClass(className, value)

Apply a set of mixin functions or mixin objects to the present class and return the new class.

Instead of writing:

let MyClass = Mixin1(Mixin2(Mixin3(Mixin4(Mixin5(BaseClass)))));

You can write:

let MyClass = Composable(BaseClass).compose(
  Mixin1,
  Mixin2,
  Mixin3,
  Mixin4,
  Mixin5
);

This function can also take mixin objects. A mixin object is just a shorthand for a mixin function that creates a new subclass with the given members. The mixin object's members are not copied directly onto the prototype of the base class, as with traditional mixins.

In addition to providing syntactic sugar, this mixin can be used to define a class in ES5, which lacks ES6's class keyword.

Kind: static method of ElementBase. Defined by Composable mixin.

An in-order collection of distributed child nodes, expanding any slot elements. Like the standard childNodes property, this includes text nodes.

Kind: instance property of ElementBase. Defined by DistributedChildren mixin.

An in-order collection of distributed children, expanding any slot elements. Like the standard children property, this skips text nodes.

Kind: instance property of ElementBase. Defined by DistributedChildren mixin.

The concatenated text content of all distributed child nodes, expanding any slot elements.

Kind: instance property of ElementBase. Defined by DistributedChildren mixin.

Set/unset the attribute with the indicated name.

This method exists primarily to handle the case where an element wants to set a default property value that should be reflected as an attribute. An important limitation of custom element consturctors is that they cannot set attributes. A call to reflectAttribute during the constructor will be deferred until the element is connected to the document.

Kind: instance method of ElementBase. Defined by AttributeMarshalling mixin.

Set/unset the class with the indicated name.

This method exists primarily to handle the case where an element wants to set a default property value that should be reflected as as class. An important limitation of custom element consturctors is that they cannot set attributes, including the class attribute. A call to reflectClass during the constructor will be deferred until the element is connected to the document.

Kind: instance method of ElementBase. Defined by AttributeMarshalling mixin.

The collection of references to the elements with IDs in a component's Shadow DOM subtree.

Kind: global variable