I created a Web Component with Vue.js and vue-custom-element. I now want my my-chat and my-whiteboard Web Components to have a height of 100%. Here's how I'm using the component:
// App.vue
<template>
<splitpanes class="default-theme">
<pane>
<my-chat></my-chat>
</pane>
<pane>
<my-whiteboard></my-whiteboard>
</pane>
</splitpanes>
</template>
The only solution I know is setting the height of all parent elements to 100% like this:
html,
body,
splitpanes,
pane,
my-chat,
my-whiteboard {
height: 100%;
}
//main.js
...
// Load custom element plugin
Vue.use(vueCustomElement);
// Define web components
Vue.customElement("skyroom-whiteboard", Whiteboard);
Vue.customElement("skyroom-chat", Chat);
...
And you have to do this for all tags inside the my-chat and my-whiteboard as well!!!
The issues I face are:
- This method does not work for my- components.
- It seems incorrect! Is there a correct way to achieve this?