Takayoshi Kochi TakayoshiKochi

HTML Modules summary (issue#645)

Initial: Jun. 28, 2017 / Last Update: Aug. 14, 2017

What is this?

This is the summary of the discussion happening for HTML Modules at webcoomponents#645.

There appear to be lots of diverse opinions, and I'll try to capture them, summarize and provide here for catching up with the discussion for all. Note that this document should never be considered official, complete or final. If anything is wrong or lost, please let @TakayoshiKochi know.

Custom Elements V1 in HTML Imports

This document describes how custom elements v1 work when they are defined or used in HTML Imports.

HTML Imports is currently implemented only in Chrome, and this document provides non-normative information about Chrome's implementation in M54 and later, for the reference of future works that tries to achieve similar functionality like HTML Imports.

Defining Custom Element in an imported document

As the global context window is shared with script running in an imported document, you can access the custom elements registry via window.customElements. This is straightforward and no different from the usage in a usual HTML document.

Trace

wtf/Assertions.h has BACKTRACE(), but it seems to fail to decode some symbols. Chromium's base/debug/stack_trace.h works better at least on Linux. One caveat is that unless explicitly add base.gyp:base in core.gyp, link fails on component=shared_library(GYP) build.

Print debug

printf() is usable in Blink, but fprintf(stderr, ...) looks better if used with backtrace.

http://crbug.com/467043

IE11:
  (default)
  document.body.tabIndex = 0
  document.head.tabIndex = 0
  document.documentElement.tabIndex = 0
  
 document.body.focus() -&gt; work (regardless of tabIndex)

	function querySlotted(root, selector) {
	let slots = root.querySelectorAll('slot');
	let matched = [];
	slots.forEach((slot) => {
	matched = matched.concat(slot.assignedNodes().filter((el) => {
	return el.matches(selector);
	}));
	});
	return matched;
	}

	<!doctype html>
	<html>
	<body>
	</body>
	<script>
	'use strict';
	let host = document.createElement('div');

	const numChildren = 10000;
	for (var i = 0; i < numChildren; ++i) {

	<!DOCTYPE html>
	<body>
	<div id="root"></div>
	</body>
	<script>
	'use strict';

	if (window.testRunner) {
	testRunner.dumpAsText();
	}

	<!DOCTYPE html>
	<body>
	<div id="root"></div>
	</body>
	<script>
	'use strict';

	if (window.testRunner) {
	testRunner.dumpAsText();
	}

	<!DOCTYPE html>
	<body>
	<div id="root"></div>
	</body>
	<script>
	'use strict';

	if (window.testRunner) {
	testRunner.dumpAsText();
	}

	#include <iostream>

	int add1(int x) {
	return ++x;
	}

	int double2(int x) {
	return 2 * x;
	}