I want to select all list items with the name `'viewer'`.

This returns an empty `NodeList`:

```js
document.querySelectorAll('[name="viewer"]');

```

But this returns an array containing the correct items:

```js
[...document.querySelectorAll('li')].filter(({ name }) => name == 'viewer');

```

The list items were created like this:

```js
const listItem = document.createElement('li');
listItem.name = 'viewer';
listItem.id = 'viewer-1337';

```

When I inspect them in the console, I see their `id` in their HTML but not their `name`. For example

```html
<li id="viewer-1337">foo</li>

```

It seems they do have the `name` property set, but it's not accessible via `document.querySelectorAll` or visible in their HTML.

Why not?

```js
const names = ['foo', 'bar'];
names.forEach(name => {
  const li = document.createElement('li');
  li.id = 'viewer-' + name;
  li.name = 'viewer';
  li.innerHTML = name;
  const ul = document.querySelector('ul');
  ul.appendChild(li);
});

const nodeList = document.querySelectorAll('[name="viewer"]');
console.log([...nodeList]);

const array = [...document.querySelectorAll('li')].filter(({ name }) => name == 'viewer');
console.log(array);
```

```html
<ul></ul>
```