title: return isTrusted false
body: <p>I'm writing my first web component with Stencil.<br/>
  It's a pills component published here : <a href="https://github.com/reservoir-dogs/rp-pills" rel="nofollow noreferrer">https://github.com/reservoir-dogs/rp-pills</a></p>
  
  <p>The component code's :</p>
  
  <pre><code>import { Component, Prop, Watch, Event, EventEmitter } from '@stencil/core';
  
  @Component({
    tag: 'rp-pills',
    styleUrl: 'rp-pills.scss',
    shadow: false
  })
  export class RpPills {
  
    @Prop() items: any[] = [];
    @Prop() displayProperty: string;
    @Prop({ mutable: true }) value: any;
    @Prop() class: string;
    @Prop() theme: string = 'default';
    @Prop() emptyMessage: string = 'No item';
    classes: string;
  
    @Event() valueChange: EventEmitter;
  
    onClick(item: any) {
      this.value = item;
      this.valueChange.emit(this.value);
    }
  
    @Watch('class')
    @Watch('theme')
    watchHandler() {
      this.classes = `nav nav-pills ${this.theme} ${this.class}`;
    }
  
    render() {
      if (this.items.length &gt; 0)
        return (
          &lt;ul class={this.classes}&gt;
            {this.items.map((item) =&gt;
              &lt;li onClick={() =&gt; this.onClick(item)} class={this.value === item ? 'active' : ''} &gt;
                &lt;a&gt;{item[this.displayProperty]}&lt;/a&gt;
              &lt;/li&gt;)}
          &lt;/ul&gt;
        );
      else
        return (
          &lt;ul class={this.classes}&gt;
            &lt;li class="empty"&gt;
              &lt;a&gt;{this.emptyMessage}&lt;/a&gt;
            &lt;/li&gt;
          &lt;/ul&gt;
        );
    }
  }
  </code></pre>
  
  <p>This test work fine :</p>
  
  <pre><code>it('should work with a list of items and selected item', async () =&gt; {
    const cmp = new RpPills();
    cmp.valueChange = {
      emit: () =&gt; { }
    };
    const spy = jest.spyOn(cmp.valueChange, 'emit');
    cmp.onClick({name:'Coucou'});
    expect(spy).toHaveBeenCalledWith({ name: 'Coucou' });
  });
  </code></pre>
  
  <p>But my HTML sample and an integration in Ionic App does not work and return the following message : {"isTrusted":false}</p>
  
  <p>HTML sample :</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html dir="ltr" lang="en"&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0"&gt;
    &lt;title&gt;Stencil Component Starter&lt;/title&gt;
    &lt;script src="/build/rppills.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;style&gt;
    .orange .active a {
      background-color: #ff0000;
    }
  
    .orange a {
      background-color: #ff6a00;
    }
  
    div {
      float: left;
      clear: both;
    }
  &lt;/style&gt;
  &lt;body&gt;
  
    &lt;div&gt;
      &lt;rp-pills display-property="name" class="nav-pills-bordered" theme="orange"&gt;
      &lt;/rp-pills&gt;
      &lt;span&gt;&lt;/span&gt;
    &lt;/div&gt;
  
    &lt;div&gt;
      &lt;rp-pills display-property="name" class="nav-justified"&gt;
      &lt;/rp-pills&gt;
      &lt;span&gt;&lt;/span&gt;
    &lt;/div&gt;
  
    &lt;div&gt;
      &lt;rp-pills display-property="name" class="nav-pills-bordered nav-justified"&gt;
      &lt;/rp-pills&gt;
      &lt;span&gt;&lt;/span&gt;
    &lt;/div&gt;
  
    &lt;div&gt;
      &lt;rp-pills class="nav-pills-bordered"&gt;
      &lt;/rp-pills&gt;
      &lt;span&gt;&lt;/span&gt;
    &lt;/div&gt;
  
    &lt;div&gt;
      &lt;rp-pills empty-message="Aucun message" class="nav-pills-bordered"&gt;
      &lt;/rp-pills&gt;
      &lt;span&gt;&lt;/span&gt;
    &lt;/div&gt;
  
    &lt;div&gt;
      &lt;rp-pills&gt;
      &lt;/rp-pills&gt;
      &lt;span&gt;&lt;/span&gt;
    &lt;/div&gt;
  
    &lt;script&gt;
      var cmps = document.querySelectorAll('rp-pills');
      for (var i = 0; i &lt; cmps.length; i++) {
        var cmp = cmps[i];
        if (cmp.attributes.length &gt; 0 &amp;&amp; cmp.attributes[0].name == 'display-property') {
          cmp.value = { 'name': 'Coucou' };
          cmp.items = [cmp.value, { 'name': 'Comment ca va ?' }, { 'name': 'Au revoir' }];
          cmp.addEventListener('valueChange', (event) =&gt; { alert(JSON.stringify(event)); });
        }
      }
      setInterval(() =&gt; {
        var cmps = document.querySelectorAll('rp-pills');
        var spans = document.querySelectorAll('span');
        for (var i = 0; i &lt; cmps.length; i++) {
          if (cmps[i].value != undefined)
            spans[i].innerText = cmps[i].value.name;
        }
      }, 1000);
    &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>