# no-script-element

> Custom element that disables all child script elements

Latest version **0.2.0** (published 2019-03-11) · MIT license · 0 weekly downloads

## Install

```sh
npm install no-script-element
pnpm add no-script-element
yarn add no-script-element
bun add no-script-element
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.0 |
| Published | 2019-03-11 |
| First published | 2019-03-11 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 12.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 4 |
| Author | Preet Shihn |
| Maintainers | shihn |
| Keywords | noscript, customelement, no script, block script |

## Links

- npm: https://www.npmjs.com/package/no-script-element
- Repository: https://github.com/pshihn/no-script
- Homepage: https://github.com/pshihn/no-script#readme
- Issues: https://github.com/pshihn/no-script/issues
- npm.io page: https://npm.io/package/no-script-element

## Recent versions

- 0.2.0 (latest) — 2019-03-11
- 0.1.0 — 2019-03-11

## README

# no-script

**no-script** is a custom element that will block all child `script` elements from executing. 

There may be times when you want to block all script under a specific node, especially when third party code is being injected under that node.

[View the live demo](https://pshihn.github.io/no-script/demo/)

## Example

Consider the following code:

```html
<no-script>
  <h2>No Script!<h2>
  <script>
    console.log('Executed: inline script');
  </script>
  <script src="a.js"></script>
  <script async src="b.js"></script>
</no-script>
```

Nothing gets logged in the console.
(Both `a.js` and `b.js` also log to the console.)

### Allowing certain scripts

Any script that you want to be allowed to execute, add the attribute `allow-execution` to the `script` tag.

```html
<no-script>
  <script>
    console.log('This will NOT get logged');
  </script>
  <script allow-execution>
    console.log('This WILL get logged');
  </script>
</no-script>
```


## Caveats
`no-script` needs to be defined synchronously in the code, or at least defined before the html in question is parsed. 

```html
<head>
  <script src="../dist/no-script.js"></script>
</head>
<body>
  <no-script>
    <script src="a.js"></script>
  </no-script>
</body>
```

Also, `no-script` relies on mutation observers, which means it's not guaranteed that the browser will not execute the script before firing the observer events. Though, having tested on modern Chrome, Safari, and Firefox, it works.

## Work in progress
This element is result of a different (not-open-source) experiment about controliing execution of third party javascript. I'm extracting the basics into an open web component. Plan is to add some of those features to this element such as enablong/scheduling disabled scripts.

---
_Source: https://npm.io/package/no-script-element · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._