connect
Connect a StacheElement
instance to the DOM.
connect(props)
Calling connect
will initialize and render an element and call its connected hook. Normally this is called by the connectedCallback, but can be called manually for testing:
import { StacheElement } from "can/everything";
class MyElement extends StacheElement {
static view = `
<p>{{this.age}}</p>
`;
static props = {
age: { type: Number, default: 30 }
};
connected() {
const p = document.createElement("p");
p.innerHTML = "World";
this.appendChild(p);
}
}
customElements.define("my-el", MyElement);
const myEl = new MyElement()
.connect({ greeting: "Hi" });
myEl.greeting // -> Hi
myEl.innerHTML // -> <p>Hi</p>
// <p>World</p>
Parameters
- props
{Object}
:The initial property values.
Returns
{Element}
:
The element
instance.
Purpose
For testing purposes or integration with other libraries, connect
can be called to simulate an element being connected with the DOM.
The first time connect
is called, it will:
- initialize the element with the property values passed to
connect
. - render the stache view into the element.
- call the connected lifecycle hook.
Subsequent calls to connect
will not have any effect.