/* global HTMLElement, customElements */
import { injectStyles } from './twind.js'

/**
 * @deprecated Use register() instead.
 */
export default function customElement (elementName, callback) {
  class CustomElement extends HTMLElement {
    connectedCallback () {
      const shadow = this.attachShadow({ mode: 'open' })
      const container = document.createElement('span')
      container.setAttribute('dir', document.documentElement.dir) // Apply text direction.
      shadow.appendChild(container)
      injectStyles(shadow)
      const attrs = Object.assign({}, ...Array.from(this.attributes, ({ name, value }) => ({ [name]: value })))
      callback(attrs, container, shadow)
    }
  }

  customElements.get(elementName) || customElements.define(elementName, CustomElement)
}
