bootstrap-table - BootstrapTable のフォーマッターは lit-html と互換性がありません

Question

lit-htmlBootstrap-table フォーマッタで要素を返すと、文字列ではない[object Object]ため予想される動作である が出力されるようです。これを解決する方法はありますか?lit-html

最小限の例

<script src="https://unpkg.com/@webcomponents/webcomponentsjs@next/webcomponents-loader.js"></script>
<script
  src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<link href="https://unpkg.com/bootstrap-table@1.15.5/dist/bootstrap-table.min.css" rel="stylesheet">
<script src="https://unpkg.com/bootstrap-table@1.15.5/dist/bootstrap-table.min.js"></script>


<script type="module">
  import {LitElement, html} from 'https://unpkg.com/@polymer/lit-element@latest/lit-element.js?module';

  class MyElement extends LitElement {
  
  	constructor() {
        super();
        this.data = [{
                'id': 0,
                'name': 'Item 0',
                'price': '$0'
            },
            {
                'id': 1,
                'name': 'Item 1',
                'price': '$1'
            },
            {
                'id': 2,
                'name': 'Item 2',
                'price': '$2'
            },
            {
                'id': 3,
                'name': 'Item 3',
                'price': '$3'
            },
            {
                'id': 4,
                'name': 'Item 4',
                'price': '$4'
            },
            {
                'id': 5,
                'name': 'Item 5',
                'price': '$5'
            }
        ]
    }

    createRenderRoot() {
        return this;
    }

    static get properties() {
        return {
            str: String
        }
    }

    firstUpdated() {
        $("#table").bootstrapTable({
            columns: this._initTableColumns(),
            data: this.data,
        })
    }

    onClick(e) {
        console.log(e)
    }

    _initTableColumns() {
        return [{
                title: "ID",
                field: "id",
                formatter: this.fieldFormatter.bind(this),
            },
            {
                title: "NAME",
                field: "name",
                formatter: this.fieldFormatter.bind(this),
            },
            {
                title: "PRICE",
                field: "price",
                formatter: this.priceFormatter.bind(this),
            }
        ]
    }


    fieldFormatter(value, row) {
        return html `<p @click="${this.onclick}"> ${value}</p>`
    }
    
    priceFormatter(value, row) {
        return  `<p>${value}</P`
    }

    render() {
      return html `
        <table id="table">
          <thead>
            <tr>
              <th data-field="id">ID</th>
              <th data-field="name" date-formater="name-formatter">Item Name</th>
              <th data-field="price">Item Price</th>
            </tr>
          </thead>
        </table>
      `;
    }  
  }
	
  customElements.define('my-element', MyElement);
</script>

<my-element str="line1"></my-element>