How to use the metal-dom.buildFragment function in metal-dom

evaluateTrackedResources_(evaluatorFn, selector, selectorTemporary, selectorPermanent, opt_appendResourceFn) {
		var tracked = this.virtualQuerySelectorAll_(selector);
		var temporariesInDoc = this.querySelectorAll_(selectorTemporary);
		var permanentsInDoc = this.querySelectorAll_(selectorPermanent);

		// Adds permanent resources in document to cache.
		permanentsInDoc.forEach((resource) => {
			var resourceKey = this.getResourceKey_(resource);
			if (resourceKey) {
				HtmlScreen.permanentResourcesInDoc[resourceKey] = true;
			}
		});

		var frag = buildFragment();
		tracked.forEach((resource) => {
			var resourceKey = this.getResourceKey_(resource);
			// Do not load permanent resources if already in document.
			if (!HtmlScreen.permanentResourcesInDoc[resourceKey]) {
				frag.appendChild(resource);
			}
			// If resource has key and is permanent add to cache.
			if (resourceKey && match(resource, selectorPermanent)) {
				HtmlScreen.permanentResourcesInDoc[resourceKey] = true;
			}
		});

		return new CancellablePromise((resolve) => {
			evaluatorFn(frag, () => {
				utils.removeElementsFromDocument(temporariesInDoc);
				resolve();

it('should remove from document tracked pending styles on screen dispose', (done) => {
		var screen = new HtmlScreen();
		document.head.appendChild(dom.buildFragment('<style id="mainStyle">body{background-color:rgb(255, 255, 255);}</style>'));
		screen.allocateVirtualDocumentForContent('<style data-senna-track="temporary" id="temporaryStyle">body{background-color:rgb(0, 255, 0);}</style>');
		screen.evaluateStyles({})
			.then(() =&gt; {
				assertComputedStyle('backgroundColor', 'rgb(255, 255, 255)');
				exitDocumentElement('mainStyle');
				done();
			});
		screen.dispose();
	});

describe('Position', function() {
	var paddingElement = dom.buildFragment('<div style="height:10000px;width:10000px;position:relative;overflow:auto;" id="paddingElement"><div style="position:absolute;top:20000px;left:20000px;height:10px;width:10px;"></div></div>').firstChild;

	before(function() {
		document.body.style.margin = '0px';
		dom.enterDocument(paddingElement);
	});

	after(function() {
		dom.exitDocument(paddingElement);
	});

	describe('viewport', function() {
		it('should check window viewport size', PositionTestHelper.skipSafariMobile(function() {
			assert.ok(window.document.documentElement.scrollHeight &gt; Position.getClientHeight(window));
			assert.ok(window.document.documentElement.scrollWidth &gt; Position.getClientWidth(window));
		}));

beforeEach(function() {
			dom.removeChildren(document.body);
			offsetElement = dom.buildFragment('<div style="position:absolute;top:100px;left:200px;"></div>').firstChild;
			dom.enterDocument(offsetElement);
		});

renderTabs_(data) {
    let container = dom.buildFragment('<div class="tabContainer"></div>');
    let tabsComponent = new Tabs({
      elementClasses: 'nav-code-tabs',
      tabs: data
    }, container);

    tabsComponent.on('changeRequest', event =&gt; {
      let currentTab = event.state.tab;
      this.hideAll_(tabsComponent.tabs);
      this.show_(tabsComponent.tabs[currentTab].element);
    });

    this.hideAll_(tabsComponent.tabs);
    this.show_(tabsComponent.tabs[0].element);

    data[0].element.parentNode.insertBefore(container, data[0].element);
  }

renderTabs_(data) {
    let container = dom.buildFragment('<div class="tabContainer"></div>');
    let tabsComponent = new Tabs({
      elementClasses: 'nav-code-tabs',
      tabs: data
    }, container);

    tabsComponent.on('changeRequest', event =&gt; {
      let currentTab = event.state.tab;
      this.hideAll_(tabsComponent.tabs);
      this.show_(tabsComponent.tabs[currentTab].element);
    });

    this.hideAll_(tabsComponent.tabs);
    this.show_(tabsComponent.tabs[0].element);

    data[0].element.parentNode.insertBefore(container, data[0].element);
  }

_renderTabs(data) {
		const container = dom.buildFragment('<div class="tabContainer"></div>');
		const tabsComponent = new Tabs(
			{
				elementClasses: 'nav-code-tabs',
				tabs: data,
			},
			container
		);

		tabsComponent.on('changeRequest', event =&gt; {
			const currentTab = event.state.tab;
			this._hideAll(tabsComponent.tabs);
			this._show(tabsComponent.tabs[currentTab].element);
		});

		this._hideAll(tabsComponent.tabs);
		this._show(tabsComponent.tabs[0].element);