JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://unpkg.com/webcompose@latest/dist/webcompose.min.js"></script>
<math-add left="2" right="2"></math-add>

JavaScript

const { ComposableElement, html, withProps } = window.webcompose

class MathAdd extends ComposableElement {
  static get observedAttributes() {return ['left','right']; }
  
  static get properties() {
    return {
      left:   {type:Number, value: 1, attr:"left"},
      right:  {type:Number, value: 1, attr:"right"}
    }
  }
  
  static get composition(){
    return [
      withProps(({left,right}) => ({
        result: left+right
      }))
    ]
  }

  static render({left, right, result}){
    return html`
      ${left} + ${right} = ${result}
    `
  }
}

customElements.define("math-add", MathAdd);