How to use HTML import in Safari with .js web components

Question

I recently stumbled upon web components and I find it awesome. However, it is still not implemented in all browsers. For this reason, I use webcomponents.js in Safari to be able to use HTML import. There are several articles and guidelines for using poly regiments, but I still do not see the available documentation. In my case, I am creating a visual style guide and must reuse several bits of code throughout the guide. I believe that importing HTML could help me achieve my goal, but as soon as I load webcomponents.js, I don’t know how to do it. Please note that at this point I am not trying to create my own web components, just use import to load certain HTML bits to certain places in my visual guide.

This is an example of the code I'm using:

window.addEventListener('HTMLImportsLoaded', function (e) {
    "use strict";

    var links,
        i,
        content;

    links = document.querySelectorAll('link[rel="import"]'); // I have more than one link tag

    for (i = 0; i < links.length; i += 1) {
        content = links[i].import;
        alert(content); //This shows **null**
    }
});

, , links - ( ), .

HTML-:

<div id="outerdiv">
    <div id="innerdiv">
        <header>
            <input id="inputfield" class="textinput" type="text">
            <span id="messagespan">You have notifications</span>
            <label id="snolabel"><input id="snocheck" type="checkbox"> New only</label>
            <link rel="import" href="main-menu.html"/>
            <ul id="menu">
                <li id="reloadbutton">Reload All</li>
                <li id="settingsbutton">Settings</li>
            </ul>
        </header>
        <section id="section-repos">
            <h4>Repositories</h4>
            <link rel="import" href="repo-listing.html"/>
        </section>
    </div>
</div>

, <link rel="import">. , .

, <link> HTML-. -, .

. .

Answer 1

, , webcomponents.js Safari. , , , , . .

SO- , .