javascript - How do you decouple Web Components? - Stack Overflow

admin管理员组

文章数量:1315252

I'm trying to work frameworkless, with pure javascript Web Components. I want my Web Components to be able to work stand-alone and be used on different sites, and yet I also want two ponents to be able to municate. So they should be able to municate without being tightly coupled.

Back when I did Angular, this was easy. I can pass objects to a ponent through a HTML attribute, and the ponent receives it as an object rather than a string. But in pure javascript, attributes are always strings. What is the right way to pass objects around, or otherwise make Web Components aware of each other and able to municate?

I'm trying to work frameworkless, with pure javascript Web Components. I want my Web Components to be able to work stand-alone and be used on different sites, and yet I also want two ponents to be able to municate. So they should be able to municate without being tightly coupled.

Back when I did Angular, this was easy. I can pass objects to a ponent through a HTML attribute, and the ponent receives it as an object rather than a string. But in pure javascript, attributes are always strings. What is the right way to pass objects around, or otherwise make Web Components aware of each other and able to municate?

• javascript
• web-ponent
• custom-element
• loose-coupling

Share Improve this question Follow edited Feb 2, 2019 at 0:11 Supersharp 31.2k1111 gold badges102102 silver badges147147 bronze badges asked Nov 27, 2017 at 12:24 mcvmcv 4,45966 gold badges3737 silver badges4141 bronze badges 2

• 2 Sounds like you'll end up creating your own framework. – nadavvadan Commented Nov 27, 2017 at 12:26
• That's what I'm hoping to avoid. I want to stick as closely to pure javascript with as little assumptions as possible about the environment or the existence of other objects, and yet have an easy way to bring two objects in contact with each other. – mcv Commented Nov 27, 2017 at 13:28

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

With Web Components you can pass objects through attributes as you said, but you can also pass an object with a method, or throug a property (which is actually a setter method).

<my-ponent id="p1"></my-ponent>
...
var myObject = { y:1, y:2 }
p1.value = myObject     //via property
p1.setValue( myObject ) //via method

Here is a sample app with two native V1 Web Components. <ponent-1> can talk to <ponent-2> because you supply an ID into <ponent-1> and that ID refers to the ID set on <ponent-2>.

This is similar to how the <label> tag work with its for attribute.

HTML

<ponent-1 link-id="c2"></ponent-1>
<hr/>
<ponent-2 id="c2"></ponent-2>

JS

// Class for `<ponent-1>`
class Component1 extends HTMLElement {
  constructor() {
    super();
    this._linkedComponent = null;
    this._input = document.createElement('input');
    this._input.addEventListener('focus', this._focusHandler.bind(this));

    this._button = document.createElement('button');
    this._button.textContent = 'Add';
    this._button.addEventListener('click', this._clickHandler.bind(this));
  }

  connectedCallback() {
    this.appendChild(this._input);
    this.appendChild(this._button);
  }

  static get observedAttributes() {
    return ['link-id'];
  }

  attributeChangedCallback(attrName, oldVal, newVal) {
    if (oldVal !== newVal) {
      if (newVal === null) {
        this._linkedComponent = null;
      }
      else {
        this._linkedComponent = document.getElementById(newVal);
      }
    }
  }

  _clickHandler() {
    if (this._linkedComponent) {
      this._linkedComponent.value = this._input.value;
    }
  }

  _focusHandler() {
    this._input.value = '';
  }
}

// Class for `<ponent-2>`
class Component2 extends HTMLElement {
  constructor() {
    super();
    this._textArea = document.createElement('textarea');
    this._textArea.setAttribute('style','width:100%;height:200px;');
  }

  connectedCallback() {
    this.appendChild(this._textArea);
  }

  set value(newValue) {
    this._textArea.value += (newValue+'\n');
  }
}

customElements.define('ponent-1', Component1);
customElements.define('ponent-2', Component2);

<ponent-1> will only talk to <ponent-2> if there is a ponent with the ID that was provided to <ponent-1> through its link-id attribute.

本文标签： javascriptHow do you decouple Web ComponentsStack Overflow