using webcomponents

component.js

/*
import { LitElement, html } from 'https://unpkg.com/@polymer/lit-element/lit-element.js?module';

export default class ActionGroup extends LitElement {

    static get properties() {
        return {
            
        }
    }

    render() {
        let original = new DOMParser().parseFromString(this.innerHTML, 'text/html').body;

        const group = document.createElement('div');
        const button = document.createElement('button');

        let html = '<strong>Click</strong>';
        button.innerHTML = html;
        group.appendChild(button);


        const anchor = document.createElement('a');
        anchor.setAttribute('href', 'http://google.com');
        anchor.setAttribute('target', '_blank');
        anchor.text = 'google';
        group.appendChild(anchor);

        let node = document.createTextNode("fasd asdjfaosdjf apsodjf asd");
        group.appendChild(node);

        let frag = document.createRange().createContextualFragment('<div>One</div><div>Two</div>');
        group.appendChild(frag);

        let doc = new DOMParser().parseFromString('<div><b>Hello!</b></div>', 'text/html');
        group.appendChild(doc.body.firstChild);

        group.appendChild(original.firstChild);

        return group;
    }
}
*/

/*
export default class ActionGroup extends HTMLElement {
    constructor() {
        super();

        let original = new DOMParser().parseFromString(this.innerHTML, 'text/html').body;

        const group = document.createElement('div');
        const button = document.createElement('button');

        let html = '<strong>Click</strong>';
        button.innerHTML = html;
        group.appendChild(button);


        const anchor = document.createElement('a');
        anchor.setAttribute('href', 'http://google.com');
        anchor.setAttribute('target', '_blank');
        anchor.text = 'google';
        group.appendChild(anchor);

        let node = document.createTextNode("fasd asdjfaosdjf apsodjf asd");
        group.appendChild(node);

        let frag = document.createRange().createContextualFragment('<div>One</div><div>Two</div>');
        group.appendChild(frag);

        let doc = new DOMParser().parseFromString('<div><b>Hello!</b></div>', 'text/html');
        group.appendChild(doc.body.firstChild);

        group.appendChild(original.firstChild);

        const shadow = this.attachShadow({ mode: 'open' });
        shadow.appendChild(group);

    }

    connectedCallback() {
        console.log('connectedCallback');
    }

    createdCallback() {
        console.log('createdCallback');
    }

    attachedCallback() {
        console.log('attachedCallback');
    }

    detachedCallback() {
        console.log('detachedCallback');
    }

    attributeChangedCallback() {
        console.log('attributeChangedCallback');
    }
}
*/

file.html

<script src="https://unpkg.com/@webcomponents/webcomponentsjs@latest/webcomponents-bundle.js"></script>

<action-group>
  <a href="#">Link A</a>
  <a href="#">Link B</a>
</action-group>

<script type="module">
  import ActionGroup from './component.js';
  customElements.define('action-group', ActionGroup);
</script>