Attributes & Variables

    Should you need to capture information via an attribute property on your web component, such as a number, URL, or some other piece of information that does not need to be exposed to search engines, here’s how you make that happen:

    // HTML using component:
    <my component how-many-bananas="4">
    // Component javascript:
      get numberBananas() {
        **return** this.getAttribute("how-many-bananas");
      connectedCallback() {
    // Component template can print variables as content:
    // or as values within other properties:
    <div src="${this.numberBananas}"></div>

    Data Object

    If you want to loop over a set of data, you can do so by utilizing the constructor. You may need to delay rendering of the component.

    // Component javascript:
     constructor() {
        super(PfeVideoBand, {
          delayRender: true
    = {
          titles: ["The Sandlot", "The Natural", "Major League"]
     attributeChangedCallback(attr, oldValue, newValue) {
        **if** (attr === "how-many-movies") {
 = newValue;
    // Component template:
    <div src="${}"></div>
    ${ => `

    Template literals… TBD