Using any valid css selector as a directive

[jimmywarting]

Something i remembered from the AlngularJS 1.x days was that you could create a directive/template targeting one specific tag element.
So if i wanted to add some functionally to a specific element to eg polyfill stuff without having to add custom attributes to some element then i could do so with AngularJS 1.x.

I really wish there was some way to make something like:

Alpine.directive('input', el => {
  if (el.type === 'time' && !el.placeholder) {
    // add fallback for browser that do not support time inputs
    el.placeholder === 'hh:mm'
    el.pattern = new Regex('...')
  }
}, { cssSelector: true })

or more precisely

Alpine.directive('input[type="time"]:not([placeholder])', el => {
  el.placeholder === 'hh:mm'
}, { cssSelector: true })

I just create a simple MutationObserver myself to do this. and got this kind of working. then i reallies that AlpineJS kind of already dose this... but only for x- attributes and better (more performant). i really wish i could target any tag/css selector elements in order to add functionality to some element without having to add custom attributes to stuff.

Something i really dislike about react is that components are extending other components and using spread that it becomes so darn deeply nested dependent on stuff rather than just adding functionality to something pre existing...

// typical react stuff:
class ExampleComponent extends React.Component {
  render () {
    return(
      <div>
        <button {...this.props}>
          Click me!
        </button>
      </div>
    )
  }
}

class RenderComponent extends React.Component {
  clickHandler () {
    console.log('Click fired!')
  }

  render () {
    return(
      <ExampleComponent onClick={this.clickHandler.bind(this)} />
    )
  }
}

I do not want to add so much custom attributes to my elements... i also wish to add this stuff to components that i do not control (that i import) so i do not directly have a way of adding x- to all elements