Web Components, pass data to and from

Question

My understanding is that data is passed to a custom html element via its attributes and sent out by dispatching a CustomEvent.

JavaScript objects can obviously be s

Answer 1

Passing Data In

If you really want/need to pass large amounts of data into your component then you can do it four different ways:

1) Use a property. This is the simplest since you just pass in the Object by giving the value to the element like this: el.data = myObj;

2) Use an attribute. Personally I hate this way of doing it this way, but some frameworks require data to be passed in through attributes. This is similar to how you show in your question. . Be careful to follow the rules related to escaping attribute values. If you use this method you will need to use JSON.parse on your attribute and that may fail. It can also get very ugly in the HTML to have the massive amount of data showing in a attribute.

3 Pass it in through child elements. Think of the element with the child elements. You can use any element type as children and they don't even need to be real elements. In your connectedCallback function your code just grabs all of the children and convert the elements, their attributes or their content into the data your component needs.

4 Use Fetch. Provide a URL for your element to go get its own data. Think of . If your already has the data for your component then this might seem like a poor option. But the browser provides a cool feature of embedding data that is similar to option 2, above, but is handled automatically by the browser.

Here is an example of using embedded data in an image:

img {
  height: 32px;
  width: 32px;
}

And here is an example of using embedded data in a web component:

function readSrc(el, url) {
    var fetchHeaders = new Headers({
      Accept: 'application/json'
    });

    var fetchOptions = {
      cache: 'default',
      headers: fetchHeaders,
      method: 'GET',
      mode: 'cors'
    };

    return fetch(url, fetchOptions).then(
      (resp) => {
        if (resp.ok) {
          return resp.json();
        }
        else {
          return {
            error: true,
            status: resp.status
          }
        }
      }
    ).catch(
      (err) => {
        console.error(err);
      }
    );
  }

  class MyEl extends HTMLElement {
    static get observedAttributes() {
      return ['src'];
    }

    attributeChangedCallback(attrName, oldVal, newVal) {
      if (oldVal !== newVal) {
        this.innerHtml = '';
        readSrc(this, newVal).then(
          data => {
            this.innerHTML = `
${JSON.stringify(data,0,2)}
            
`;
          }
        );
      }
    }
  }

  // Define our web component
  customElements.define('my-el', MyEl);

You can do that same this using XHR, but if your browser supports Web Components then it probably supports fetch. And there are several good fetch polyfills if you really need one.

The best advantage to using option 4 is that you can get your data from a URL and you can directly embed your data. And this is exactly how most pre-defined HTML elements, like work.

UPDATE

I did think of a 5th way to get JSON data into an object. That is by using a