Bind querySelector to dollar sign ($) to reference DOM elements without jQuery

bind-queryselector-to-dollar-sign.js

/**
 * Bind querySelector to dollar sign ($) to easily reference DOM elements without jQuery
 * Source: https://twitter.com/MrAhmadAwais/status/1113094169025708033
 */

// In case you're also loading jQuery
jQuery.noConflict();

// Example - Change an element's background color
// Shorthand for: document.querySelector( '.selector' ).style.background = '#BADA55';
const $ = document.querySelector.bind( document );
$( '.selector' ).style.background = '#BADA55';

// Or wait for DOM
(function($) {
    $( '#element' ).innerHTML = 'DOM is loaded!';
})( document.querySelector.bind( document ) );

In case anyone sees this: using this alias causes Cypress to hang and fail when using .invoke(…). Too bad I couldn’t find a way to make both work at the same time!