Using shadow dom?

Wappler General Need Help
3

Here a way using App Connect

For App Connect 1:

dmx.Component('shadow', {
  attributes: {
    content: {
      type: 'string',
      default: ''
    }
  },

  render (node) {
    this.shadowRoot = node.attachShadow({mode: 'open'});
    this.shadowRoot.innerHTML = this.props.content;
  },

  update (props) {
    if (props.content !== this.props.content) {
      this.shadowRoot.innerHTML = this.props.content;
    }
  }
});

For App Connect 2 Beta:

dmx.Component('shadow', {
  attributes: {
    content: {
      type: 'string',
      default: ''
    }
  },

  init () {
    this._shadowRoot = this.$node.attachShadow({mode: 'open'});
  },

  render () {
    this._shadowRoot.innerHTML = this.props.content;
  },

  performUpdate (updatedProps) {
    if (updatedProps.has('content')) {
      this.render();
    }
  }
});

Usage with your code as example:

<dmx-if dmx-bind:condition="payload.parts.where('mimeType', 'text/html', '==')">
  <dmx-shadow dmx-bind:content="payload.parts.where('mimeType', 'text/html' , '==' )[0].body.data.decodeBase64()"></dmx-shadow>
</dmx-if>
2 Likes