# Web Components in Kibana or Plugins

**URL:** <https://discuss.elastic.co/t/web-components-in-kibana-or-plugins/153485>\
**Category:** Kibana\
**Created:** [October 22, 2018, 9:48pm UTC](https://discuss.elastic.co/t/web-components-in-kibana-or-plugins/153485 "2018-10-22T21:48:10Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![fetherolfjd](https://avatars.discourse-cdn.com/v4/letter/f/eb8c5e/32.png) [@fetherolfjd](https://discuss.elastic.co/u/fetherolfjd)\
**Post date:** [October 22, 2018, 9:48pm UTC](https://discuss.elastic.co/t/web-components-in-kibana-or-plugins/153485/1 "2018-10-22T21:48:10Z")

</div>

Hi, I was exploring the potential of using a [web component](https://developer.mozilla.org/en-US/docs/Web/Web_Components), specifically a custom element written via [Angular Elements](https://angular.io/guide/elements), into Kibana, but am having a difficult time determining where to inject the produced javascript.

I'm currently looking at/using Kibana 5.6 and the only thing I've been able to come up with that even gets me remotely close is hacking up `src/ui/views/ui_app.jade` but.... well, yuck.

Can anyone provide a recommended approach for this?

Thanks for any help.

---

<div class="post-metadata">

**Author:** ![spalger](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/spalger/32/14092_2.png) [@spalger](https://discuss.elastic.co/u/spalger)\
**Post date:** [October 23, 2018, 2:23am UTC](https://discuss.elastic.co/t/web-components-in-kibana-or-plugins/153485/2 "2018-10-23T02:23:31Z")

</div>

Kibana does support plugins that can do things like inject custom elements or visualization types, I recommend using a newer version of the stack though, and trying out the [kibana plugin generator](https://github.com/elastic/kibana/tree/master/packages/kbn-plugin-generator) to get started.

---

<div class="post-metadata">

**Author:** ![fetherolfjd](https://avatars.discourse-cdn.com/v4/letter/f/eb8c5e/32.png) [@fetherolfjd](https://discuss.elastic.co/u/fetherolfjd)\
**Post date:** [October 23, 2018, 2:47am UTC](https://discuss.elastic.co/t/web-components-in-kibana-or-plugins/153485/3 "2018-10-23T02:47:30Z")

</div>

Yeah, we're looking at upgrading into 6.x.x at some point, but unfortunately are stuck at 5.6 for now.

We have several plugins and visualization enhancements, but I'm struggling to get the custom element Javascript injected from within a plugin at this point. Maybe I'm just doing or missing something silly.

---

<div class="post-metadata">

**Author:** ![spalger](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/spalger/32/14092_2.png) [@spalger](https://discuss.elastic.co/u/spalger)\
**Post date:** [October 23, 2018, 3:00am UTC](https://discuss.elastic.co/t/web-components-in-kibana-or-plugins/153485/4 "2018-10-23T03:00:12Z")

</div>

Hmm, how are you trying to register your custom element from your plugin? You should just be able to import the code from your custom element and register it with [`customElements.define()`](https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry/define) I would expect.

---

<div class="post-metadata">

**Author:** ![fetherolfjd](https://avatars.discourse-cdn.com/v4/letter/f/eb8c5e/32.png) [@fetherolfjd](https://discuss.elastic.co/u/fetherolfjd)\
**Post date:** [October 23, 2018, 3:26am UTC](https://discuss.elastic.co/t/web-components-in-kibana-or-plugins/153485/5 "2018-10-23T03:26:29Z")

</div>

With the Angular Elements setup it actually just ends up spitting out a Javascript file that includes the registration of the element with the browser, with the idea being the file gets included as a script to be loaded in `index.html`.

So I guess I was looking for the best way to arbitrarily load a Javascript file in a `script` tag or something with Kibana, which eventually led me to `ui_app.jade`. That was after trying to load it with import or require in one of the plugin files but with no success there. I was suspecting it had something to do with the file not actually getting the element registered soon enough, but I'm not sure.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/elastic/original/3X/1/a/1ac57faf039f6b580b3f104ef42a2a89e41014de.png) [@system](https://discuss.elastic.co/u/system)\
**Post date:** [November 20, 2018, 3:34am UTC](https://discuss.elastic.co/t/web-components-in-kibana-or-plugins/153485/6 "2018-11-20T03:34:48Z")

</div>

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.
