class RaButton extends HTMLElement {
  connectedCallback() {
    this.innerHTML = `<button>Hello world</button>`;
  }
}
customElements.define("ra-button", RaButton);

 <ra-button></ra-button>

class RaButton extends HTMLElement {
  connectedCallback() {
    this.innerHTML = `<button>Hello world</button>`;
  }
}
customElements.define("ra-button", RaButton);

 <ra-button></ra-button>

   <button>Hello World!</button>

var host = document.querySelector("button");
var root = host.createShadowRoot();
root.textContent = "🌈🦄";

<button id="add-word">Click me </button>
<div id="hello">Hello</div>

<template id="template-world">
  <span>World</span>
</template>

document.getElementById("add-word").addEventListener("click",(e)=>{
  var template = document.getElementById("template-world");
  var hello = document.getElementById("hello");
  
  // Create an instance of the template content
  var  instance = document.importNode(template.content, true);
  // Append istance to hello element
  hello.appendChild(instance)
})

<link rel="import" href="my-component.html">

vue create my-vue-project
cd my-vue-project
npm run serve

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'app',
  components: {
    HelloWorld
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

//install UI5 Web Components
//npm install @ui5/webcomponents
//add this in main.js file
Vue.config.ignoredElements = [/^ui5-/];

vue add ui5-webcomponents

<template>
  <div class="main-box">
    <ui5-shellbar :primary-title="title" />
  </div>
</template>
<script>
import "@ui5/webcomponents/dist/ShellBar";
export default {
  name: "app",
  data() {
    return {
      title: "Cats are Awesome",
    };
  },
</script>
<style lang="scss">
.main-box {
  display: flex;
  flex-flow: column;
  align-items: center;
}
</style>

<template>
  <div class="buttons-box">
    <ui5-button icon="sap-icon://thumb-up" @click="onLike">Like</ui5-button>
    <ui5-button icon="sap-icon://thumb-down" type="Negative" @click="onUnLike"
      >Not really</ui5-button
    >
  </div>
</template>
<script>
import "@ui5/webcomponents/dist/Button";
export default {
  methods: {
    onLike() {
      this.$emit("like");
    },
    onUnLike() {
      this.$emit("unlike");
    }
  }
};
</script>
<style scoped>
.buttons-box {
  margin: 1rem;
  width: 400px;
  display: flex;
  justify-content: space-between;
}
</style>