A simple frame for an overlay that displays a drop-shadow.
Ancestry: OverlayFrame → ReactiveElement → HTMLElement
The collection of references to the elements with IDs in the component's Shadow DOM subtree.
Example: if component's template contains a shadow element
<button id="foo">, you can use the reference
this.$.foo to obtain
the corresponding button in the component instance's shadow tree.
Such references simplify a component's access to its own elements. In exchange, this mixin trades off a one-time cost of querying all elements in the shadow tree instead of paying an ongoing cost to query for an element each time the component wants to inspect or manipulate it.
These shadow element references are established the first time you read
$ property. They are not updated if you subsequently modify the
shadow tree yourself (to replace one item with another, to add new items
id attributes, etc.).
The default state for the component. This can be extended by mixins and classes to provide additional default state.
Wrap a base template with elements necessary to capture focus.
Call this method in a components
wrap method hangs off of
FocusCaptureMixin like a static
method; the mixin does not add it to an element's prototype chain.
Accordingly, you must invoke this method as
string– for the element(s) controlled by the arrow buttons
string a template that includes left/right arrow buttons
Defined by FocusCaptureMixin
Apply changes to a proposed new state for the component to enforce necessary consistency between state members. See Refining state for details.
object– a proposed new state for the component
boolean - true if the state is already acceptable as it is
Render the component to the DOM.
This method does nothing if the state has not changed since the last render call.
This method invokes all internal render methods. It then invoked componentDidMount (for first render) or componentDidUpdate (for subsequent renders).
Update the component's state by merging the specified changes on top of the existing state. If the component is connected to the document, and the new state has changed, this returns a promise to asynchronously render the component. Otherwise, this returns a resolved promise.
object– the changes to apply to the element's state
Promise - resolves when the new state has been rendered
Return true if the component should update.
The default implementation does a shallow check of property values like React's PureComponent. This seems adequate for most web components. You can override this to always return true (like React's base Component class), or to perform more specific, deeper checks for changes in state.
object– the proposed new state for the element
boolean - true if the component should update (rerender)
The component's current state.
The returned state object is immutable. To update it, invoke
The attributes and properies that should be applied to the component on render. By default, this is an empty plain object. Your mixin or component can extend this to identify the properties to set on the host element or elements in the shadow subtree.