# ember-embedded-snippet
> Embed Ember apps into external pages with a simple snippet
Latest version **0.7.1** (published 2022-05-05) · MIT license · 0 weekly downloads
## Install
```sh
npm install ember-embedded-snippet
pnpm add ember-embedded-snippet
yarn add ember-embedded-snippet
bun add ember-embedded-snippet
```
## Health
**Score 15/100 (F)** — status: abandoned.
Positive: no vulnerabilities.
Warnings: low downloads; no types; no esm support; pre 1.0.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 0.7.1 |
| Published | 2022-05-05 |
| First published | 2020-10-19 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | 12.* \|\| >= 14 |
| Dependencies | 4 |
| Unpacked size | 53.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 16 |
| Author | Simon Ihmig |
| Maintainers | simonihmig |
| Keywords | ember-addon |
## Links
- npm: https://www.npmjs.com/package/ember-embedded-snippet
- Repository: https://github.com/kaliber5/ember-embedded-snippet
- Homepage: https://github.com/kaliber5/ember-embedded-snippet#readme
- Issues: https://github.com/kaliber5/ember-embedded-snippet/issues
- npm.io page: https://npm.io/package/ember-embedded-snippet
## Dependencies (4)
- [jsdom](https://npm.io/package/jsdom.md) ^19.0.0
- [ember-cli-babel](https://npm.io/package/ember-cli-babel.md) ^7.26.6
- [broccoli-merge-trees](https://npm.io/package/broccoli-merge-trees.md) ^4.2.0
- [broccoli-caching-writer](https://npm.io/package/broccoli-caching-writer.md) ^3.0.3
## Recent versions
- 0.7.1 (latest) — 2022-05-05
- 0.5.0-beta.0 (beta) — 2021-05-10
- 0.7.0 — 2021-10-26
- 0.6.1 — 2021-08-26
- 0.6.0 — 2021-08-26
- 0.5.0 — 2021-05-27
- 0.4.1 — 2021-03-23
- 0.4.0 — 2020-10-19
## README
ember-embedded-snippet
==============================================================================
Embed your Ember app as a WebComponent into external pages with a simple JavaScript snippet.
Compatibility
------------------------------------------------------------------------------
* Ember.js v3.16 or above
* Ember CLI v3.20 or above
* Node.js v12 or above
Installation
------------------------------------------------------------------------------
```
ember install ember-embedded-snippet
```
To allow compatibility with `ember-auto-import` v2 and Embroider, since `v0.7.0` the addon requires some manual
setup to postprocess Ember's build.
In your `ember-cli-build.js` change the last part:
```diff
module.exports = function (defaults) {
let app = new EmberAddon(defaults, {
// ...
});
- return app.toTree();
+ return require('ember-embedded-snippet').process(app, app.toTree());
}
```
Then you should also add the custom element invocation to your `app/index.html`, so when running locally using `ember serve`
the app is bootstrapped the same way as when it is embedded in production. See also the "Usage" below!
```diff
{{content-for "body"}}
+
{{content-for "body-footer"}}
```
> Note: doing this also for `tests/index.html` will not work, you should keep that file as-is. That means tests use the default
> bootstrapping process of Ember.
Usage
------------------------------------------------------------------------------
Add a snippet like this to your static or server rendered HTML page:
```html
```
`my-app-name` is the name of your app. As custom elements require to contain a dash, if your app name is a single word, append the `-app` suffix.
### Shadow DOM
To prevent styles leaking from the parent page into your app or vice versa, you can enable [shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM) support:
```html
```
> Note that even with shadow DOM, inherited styles will also be inherited by your shadow DOM, thus leak into your app.
> So you might want to [reset inheritable styles](https://developers.google.com/web/fundamentals/web-components/shadowdom#reset)
### Custom arguments
Any other attributes added to the custom element are taken as custom arguments, that you can read from the `embedded` service's `args` property:
```html
```
```js
import Controller from '@ember/controller';
import { inject as service } from '@ember/service';
export default class FooController extends Controller {
@service
embedded;
get foo() {
return this.embedded.args.hasOwnProperty('enable-foo') ? this.embedded.args.foo : null;
}
}
```
Contributing
------------------------------------------------------------------------------
See the [Contributing](CONTRIBUTING.md) guide for details.
License
------------------------------------------------------------------------------
This project is licensed under the [MIT License](LICENSE.md).
---
_Source: https://npm.io/package/ember-embedded-snippet · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._