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

it('should rerender surfaces when component is decorated and main content html is not correct', function() {
			var frag = dom.buildFragment('<div id="main">wrong<div id="main-s1">Surface Content</div></div>');
			var element = frag.childNodes[0];
			var surfaceElement = element.childNodes[0];

			var TestComponent = createTestComponentClass({
				main: '<div id="main">%%%%~s-main-s1~%%%%</div>',
				'main-s1': '<div id="main-s1">Surface Content</div>'
			});

			component = new TestComponent({
				element: element
			}).decorate();
			assert.notStrictEqual(surfaceElement, component.getRenderer().getSurfaceElement('main-s1'));
		});

it('should not rerender surfaces when component is decorated and html is correct', function() {
			var frag = dom.buildFragment('<div id="main"><div id="main-s1">Surface Content</div></div>');
			var element = frag.childNodes[0];
			var surfaceElement = element.childNodes[0];

			var TestComponent = createTestComponentClass({
				main: '<div id="main">%%%%~s-main-s1~%%%%</div>',
				'main-s1': '<div id="main-s1">Surface Content</div>'
			});

			component = new TestComponent({
				element: element
			}).decorate();
			assert.strictEqual(surfaceElement, component.getRenderer().getSurfaceElement('main-s1'));
		});

it('should override existing content from the main element', function() {
			var frag = dom.buildFragment('<div id="main"><div>Inner Content</div></div>');
			var element = frag.childNodes[0];
			var originalContent = element.childNodes[0];

			var TestComponent = createTestComponentClass({
				main: '<div id="main"><div>Inner Content</div></div>'
			});

			component = new TestComponent({
				element: element
			}).render();
			assert.notStrictEqual(originalContent, component.element.childNodes[0]);
		});
	});

events: '<button data-onclick="handleClick" id="events"></button>'
			});
			EventsTestComponent.prototype.handleClick = sinon.stub();
			ComponentRegistry.register(EventsTestComponent, 'EventsTestComponent');

			var CustomComponent = createTestComponentClass({
				main: '<div id="main">%%%%~s-events~%%%%</div>'
			});
			CustomComponent.SURFACES = {
				events: {
					componentName: 'EventsTestComponent'
				}
			};

			var content = '<div id="main"><button data-onclick="handleClick" id="events"></button></div>';
			dom.enterDocument(dom.buildFragment(content));

			component = new CustomComponent({
				element: '#main'
			}).decorate();
			var button = component.element.querySelector('button');
			dom.triggerEvent(button, 'click');
			assert.strictEqual(1, component.components.events.handleClick.callCount);
		});

findElementInContent_(id, content) {
		content = core.isString(content) ? dom.buildFragment(content) : content;
		var firstChild = content.childNodes[0];
		if (firstChild && firstChild.id === id) {
			return firstChild;
		}
	}

buildFragment_(content) {
		var frag = dom.buildFragment(content);
		if (content.indexOf('