New Targets creation

This time I will try to act smarter and ask before write code 😂

Sometimes I need to create a DOM elements, that Stimulus controller should controller after. For example in this interface, when I create a new item, I need a way to add it to DOM.

Right now I need to write this

    // create tag element
    const item = document.createElement('div')
    item.setAttribute('data-title', 'aa')
    item.setAttribute('data-id', 123)
    item.setAttribute('data-target', 'categories.selected_item')
    item.setAttribute('data-action', 'click->categories#removeItem')
    item.setAttribute('class', 'categories--selected-item')
    item.innerHTML = 'aa'

    this.targets.find('selected_items').appendChild(item)

Can we present some sort of function to simply create new dom elements inside. Like:

// element can be a 'div' by default
const target = this.targets.create('selected_item', { 
  element: 'div', 
  data: {}, 
  htmlOptions: { class: 'categories--selected-item' }, 
  innerHTML: '' 
})
this.targets.find('selected_items').appendChild(target)

---

Probably we can just create a simple standard way to adding mix-ins to controllers. This case we can keep things like that outside of Stimulus

[javan]

You can access a controller’s own identifier with this.identifier. So you can avoid hard coding and repeating it by doing:

item.setAttribute('data-target', `${this.identifier}.selected_item`)
item.setAttribute('data-action', `click->${this.identifier}#removeItem`)

Instead of:

 item.setAttribute('data-target', 'categories.selected_item')
 item.setAttribute('data-action', 'click->categories#removeItem')

[mdesantis]

What about using template tag? https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template