Accept custom characters for attributes name

Basic info:

• Node.js v10.13.0:
• jsdom 12.2.0:

Minimal reproduction case

const { JSDOM } = require("jsdom");

const dom = new JSDOM(`
  <lazy-image src="path-to-src"></lazy-image>
`);

let document = dom.window.document;

let image = document.createElement('img');

image.setAttribute('[src]', 'placeholder-image'); 
// throws
UnhandledPromiseRejectionWarning: InvalidCharacterError: "[src]" did not match the Name production: Unexpected syntax in top
Line 1:
[src]

I know this is not a standard naming of attributes, but can the thrown exception in /node_modules/jsdom/lib/jsdom/living/nodes/Element-impl.js line 240 become an optional

For example

  setAttribute(name, value) {
     try {
    validateNames.name(name);
   } catch(e) {
     if (! allowCustomAttributeNaming) { 
        throw e;
      }
   }
   ...
  }

The reason for this that i’m using Jsdom for compiling html files and some times some attributes are exchanged with another ones.

Also elements could be duplicated with same attributes but with extra/minimal attributes.

Mainly i use [custom-attribute] and (custom-event) as attributes for any element so it would be easier to maintain it with same syntax.

How does similar code behave in browsers?

It is not rendered in the browser as the passed html to jsdom is not being displayed directly to the browser.

The code is transformed to dom elements so the passed code will be handled only by the dom compiler.

[Morglod]

I’m using jsdom to generate DOM tree in node without browser.
There is browser’s supported custom attribute names like ‘–smth’ for generated html code (not for setAttribute, yes).

Monkeypatch for this:

const validateNames = require('jsdom/lib/jsdom/living/helpers/validate-names.js');

const name_ = validateNames.name;
validateNames.name = function (name: string) {
    try {
        name_(name);
    } catch {}
};

[rubyjedi]

+1 for adding this as an option - perhaps in the JSDOM constructor options?

I ran into this issue while trying to use JSDOM as a code-generator to produce PWA code (Angular, React, etc) from a collection of templates.