Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/simonihmig/ember-embedded-snippet
https://github.com/simonihmig/ember-embedded-snippet
ember ember-addon
Last synced: 4 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/simonihmig/ember-embedded-snippet
- Owner: simonihmig
- License: mit
- Created: 2020-10-19T07:37:44.000Z (about 4 years ago)
- Default Branch: master
- Last Pushed: 2024-05-07T16:14:38.000Z (6 months ago)
- Last Synced: 2024-10-19T17:56:02.336Z (17 days ago)
- Topics: ember, ember-addon
- Language: JavaScript
- Homepage:
- Size: 2.2 MB
- Stars: 16
- Watchers: 5
- Forks: 5
- Open Issues: 15
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
Awesome Lists containing this project
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).