How to use metal-dom - 10 common examples

attachElement(parentElement, siblingElement) {
		const element = this.element;
		if (element && (siblingElement || !element.parentNode)) {
			const parent =
				toElement(parentElement) || this.DEFAULT_ELEMENT_PARENT; // eslint-disable-line
			parent.insertBefore(element, toElement(siblingElement));
		}
	}

attachElement(parentElement, siblingElement) {
		const element = this.element;
		if (element && (siblingElement || !element.parentNode)) {
			const parent =
				toElement(parentElement) || this.DEFAULT_ELEMENT_PARENT; // eslint-disable-line
			parent.insertBefore(element, toElement(siblingElement));
		}
	}

let showOrHide = () => {
      if (this.isDisposed()) {
        return;
      }

      dom.removeClasses(
        this.element,
        this.animClasses[visible ? 'hide' : 'show']
      );
      dom.addClasses(this.element, this.animClasses[visible ? 'show' : 'hide']);

      // Some browsers do not fire transitionend events when running in background
      // tab, see https://bugzilla.mozilla.org/show_bug.cgi?id=683696.
      Anim.emulateEnd(this.element);

      if (visible && core.isNumber(this.hideDelay)) {
        this.syncHideDelay(this.hideDelay);
      }
    };

let showOrHide = () => {
      if (this.isDisposed()) {
        return;
      }

      dom.removeClasses(
        this.element,
        this.animClasses[visible ? 'hide' : 'show']
      );
      dom.addClasses(this.element, this.animClasses[visible ? 'show' : 'hide']);

      // Some browsers do not fire transitionend events when running in background
      // tab, see https://bugzilla.mozilla.org/show_bug.cgi?id=683696.
      Anim.emulateEnd(this.element);

      if (visible && core.isNumber(this.hideDelay)) {
        this.syncHideDelay(this.hideDelay);
      }
    };

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();

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);
		}
	}

it('should render html sanitized object attributes correctly', function() {
			comp = new HtmlContentComponent({
				content: {
					content: '<span class="custom">HTML Content</span>',
					contentKind: 'HTML'
				}
			});

			assert.strictEqual(1, comp.element.childNodes.length);
			assert.strictEqual('SPAN', comp.element.childNodes[0].tagName);
			assert.ok(dom.hasClass(comp.element.childNodes[0], 'custom'));
			assert.strictEqual('HTML Content', comp.element.childNodes[0].textContent);
		});
	});

it('should render contents from component\'s jsx function', function() {
		class TestComponent extends Component {
			render() {
				return <div class="test">Hello World</div>;
			}
		}
		TestComponent.RENDERER = JSX;

		component = new TestComponent();
		assert.strictEqual('DIV', component.element.tagName);
		assert.ok(dom.hasClass(component.element, 'test'));
		assert.strictEqual('Hello World', component.element.textContent);
	});

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'));
		});