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

updatePlaceholderSurface_(collectedData) {
		var surface = collectedData.surface;
		var surfaceElementId = surface.surfaceElementId;
		if (surface.componentName) {
			// Elements of component surfaces are unchangeable, so we need to replace the
			// rendered element with the component's.
			dom.replace(this.component_.findElementById(surfaceElementId), this.getSurfaceElement(surfaceElementId, surface));

			// Component surfaces need to be handled in case some internal details have changed.
			this.emitRenderSurfaceEvent_(surfaceElementId, collectedData.content, collectedData.cacheContent);
		} else {
			// This surface's element has either changed or never been created yet. Let's just
			// reset it to null, so it can be fetched from the dom again when necessary. Also,
			// since there's no need to do cache checks or rerender, let's just attach its
			// listeners and cache its content manually.
			surface.element = null;
			this.cacheSurfaceContent(surfaceElementId, collectedData.cacheContent);
			this.eventsCollector_.attachListenersFromHtml(collectedData.cacheContent, surfaceElementId);
		}
	}

replaceSurfaceContent_(surfaceElementId, surface, content) {
		content = this.replaceSurfacePlaceholders_(content, surfaceElementId, surface);
		if (surfaceElementId === this.component_.id) {
			this.replaceElementContent(content);
			return;
		}

		var el = this.getSurfaceElement(surfaceElementId);
		var frag = this.buildFragment_(content);
		var element = this.findElementInContent_(surfaceElementId, frag);
		if (element) {
			surface.element = element;
			dom.replace(el, surface.element);
		} else {
			dom.removeChildren(el);
			dom.append(el, frag);
		}
	}