constructed-css.js

const sheet = new CSSStyleSheet();
// border border-[#B0B0B0] mt-1 rounded outline-none py-1 px-3 h-8
sheet.replace(`
  *, ::after, ::before {
    box-sizing: border-box;
  }

  :host {
    max-width: 100%;
    width: auto;
    font-size: inherit;
    border-width: 0;
    border-style: solid;
    border-color: #e5e7eb;
  }

  ::slotted(input) { max-width: 100% }

  input {
    --tw-border-opacity: 1;
    border-color: rgb(176 176 176 / var(--tw-border-opacity));
    max-width: 100%
  }

  .outline-none {
    outline: 2px solid transparent;
    outline-offset: 2px;
  }
  .py-1 {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
  }
  .px-3 {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
  .border {
    border-width: 1px;
  }

  .rounded {
    border-radius: 0.25rem;
  }

  .h-8 {
    height: 2rem;
  }

  .mt-1 {
    margin-top: 0.25rem;
  }

  button, input, optgroup, select, textarea {
    font-family: inherit;
    font-size: 100%;
    font-weight: inherit;
    line-height: inherit;
    color: inherit;
    margin: 0;
    padding: 0;
  }
`);

helpers.css

@import '/static/assets/css/colors.css';

.border-grey {
  border-color: var(--color-grey-light-2)
}

tailwind-webcomponents.css

*, ::after, ::before {
  box-sizing: border-box;
  border-width: 0;
  border-style: solid;
  border-color: #e5e7eb;
}

:host {
  max-width: 100%;
  width: auto;
  font-size: inherit;
  border-width: 0;
  border-style: solid;
  border-color: #e5e7eb;
}

input {
  max-width: 100%
}

.outline-none {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.py-1 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}
.px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
.border {
  border-width: 1px;
}

.rounded {
  border-radius: 0.25rem;
}

.h-8 {
  height: 2rem;
}

.mt-1 {
  margin-top: 0.25rem;
}

button, input, optgroup, select, textarea {
  font-family: inherit;
  font-size: 100%;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
  margin: 0;
  padding: 0;
}

trying-support-form-controle.js

import { query } from '/static/assets/js/helpers.js';

const maskPhoneOpts = {
  mask: [
    {
      mask: '+00 (00) 0000-0000'
    },
    {
      mask: '+00 (00) 0 0000-0000'
    },
  ],
};

const maskCep = {
  mask: '00000-000'
}

const maskRegistryCode = {
  mask: [
    {
      mask: '000.000.000-00'
    },
    {
      mask: '00.000.000/0000-00'
    },
  ],
};

class InputField extends HTMLElement {
  static formAssociated = true;

  constructor() {
    super();

    const shadow = this.attachShadow({ mode: 'open' });

    shadow.innerHTML = `
      <style>
        @import "/static/assets/css/tailwind-webcomponents.css";
        @import "/static/assets/css/helpers.css";
      </style>

      <input part="field" id="field" class="border-grey"/>
    `;

    this.internals_ = this.attachInternals();
    this.value_ = '';

    this.currentInput.addEventListener('input', () => this.onInput());
    this.internals_.setFormValue('testing');
  }
  
  connectedCallback() {
    this.copyAttributes();
    this.setMask();
  }

  setMask() {
    switch(this.mask) {
      case 'cep':
        IMask(this.currentInput, maskCep);
        break;
      case 'phone':
        IMask(this.currentInput, maskPhoneOpts);
        break;
      case 'registry_code':
        IMask(this.currentInput, maskRegistryCode);
        break;
    }
  }

  copyAttributes() {
    const template = document.createElement('template');

    template.innerHTML = this.inputBase;

    const input = template.content.cloneNode(true).firstChild;

    
    for (let { value, name } of input.attributes) {
      const currentAttr = this.currentInput?.getAttribute(name);

      const finalAttr = currentAttr ? `${currentAttr} ${value}` : value;

      this.currentInput.setAttribute(name, finalAttr);
    }
  }

  onInput() {
    console.log('input');
    this.internals_.setFormValue(this.value);
  }

  // Form controls usually expose a "value" property
  get value() { return this.currentInput?.value; }
  set value(v) { this.value_ = v; }
  get form() { return this.internals_.form; }
  get name() { return this.currentInput.getAttribute('name')};
  get type() { return this.localName }
  get validity() {return this.internals_.validity; }
  get validationMessage() {return this.internals_.validationMessage; }
  get willValidate() {return this.internals_.willValidate; }

  checkValidity() { return this.internals_.checkValidity(); }
  reportValidity() {return this.internals_.reportValidity(); }

  get currentInput() {
    const slotItems = this.slotEl?.assignedElements();

    if (slotItems?.length) return slotItems[0];
    return this.shadowRoot?.querySelector('input');
  }

  get slotEl() {
    return this.shadowRoot?.querySelector('slot');
  }

  get mask() {
    return this.getAttribute('mask');
  }

  get inputBase() {
    return this.getAttribute('inputBase');
  }
}

customElements.define('input-field', InputField);