feat: add Template Attributes polyfill

.eslintignore

@@ -44,3 +44,7 @@ packages/webcomponentsjs/webcomponents-bundle.js*
 packages/scoped-custom-element-registry/**/.wireit/
 packages/scoped-custom-element-registry/**/.tsbuildinfo
 packages/scoped-custom-element-registry/**/build/
+
+packages/template-attributes/**/.wireit/
+packages/template-attributes/**/.tsbuildinfo
+packages/template-attributes/**/build/

.prettierignore

@@ -45,6 +45,10 @@ packages/scoped-custom-element-registry/**/.wireit/
 packages/scoped-custom-element-registry/**/.tsbuildinfo
 packages/scoped-custom-element-registry/**/build/
 
+packages/template-attributes/**/.wireit/
+packages/template-attributes/**/.tsbuildinfo
+packages/template-attributes/**/build/
+
 LICENSE
 packages/*/LICENSE.md
 packages/tests/html-imports/html/imports/unclosed-import.html

README.md

@@ -141,6 +141,14 @@ The current version of the Web Components loader does **not** automatically
 polyfill HTML Imports. Applications that still depend on HTML Imports are
 recommended to install `@webcomponents/html-imports` and load it separately.
 
+---
+
+### [![Published on npm](https://img.shields.io/npm/v/@webcomponents/template-attributes.svg)](https://www.npmjs.com/package/@webcomponents/template-attributes) [template-attributes](https://github.com/webcomponents/polyfills/tree/master/packages/template-attributes)
+
+##### [Documentation](https://github.com/webcomponents/polyfills/tree/master/packages/template-attributes#readme) | [Changelog](https://github.com/webcomponents/polyfills/blob/master/packages/template-attributes/CHANGELOG.md) | [Issues](https://github.com/webcomponents/polyfills/issues?q=is%3Aissue+is%3Aopen+label%3A%22Package%3A+template-attributes%22)
+
+Polyfill for Template Attributes (Spec TBD)
+
 ## Roadmap
 
 The following APIs are on the roadmap for 2020:

packages/template-attributes/.gitignore

@@ -0,0 +1,3 @@
+.wireit/
+.tsbuildinfo
+build/

packages/template-attributes/CHANGELOG.md

@@ -0,0 +1,11 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+<!-- ## Unreleased -->
+<!-- ### Added -->
+<!-- ### Changed -->
+<!-- ### Fixed -->

packages/template-attributes/README.md

@@ -0,0 +1,21 @@
+# Template Attributes polyfill prototype
+
+## 🚨 Work in progress
+
+This polyfill explores implementation of a non-finalized spec proposal and is
+currently a work in progress.
+
+## Overview
+
+Template Attributes polyfill based on the <https://github.com/Symbitic/webcomponents/blob/template-attribute/proposals/Template-Attribute.md> proposal.
+
+Technique: modifies HTMLElement to patch `attachShadow()` to attach a mutation observer and setup a proxy on the `.templates` property. While the mutation observer isn't required and is strictly an implementation detail, it is considerably more performant than running `querySelectorAll("*")` every time the `templates` property is changed.
+
+## Demo
+
+Run two commands in different windows/tabs inside the `./packages/template-attributes` folder:
+
+    npx tsc --watch
+    npx serve ./
+
+Then open `http://<host>:<port>/demo` in a web browser. Edit `demo/index.html` and refresh the page to see the results.

packages/template-attributes/demo/index.html

@@ -0,0 +1,24 @@
+<template id="foo">
+  <p><span template-classname="colors" template-textcontent="msg"></span></p>
+</template>
+<script src="../build/template-attributes.js"></script>
+<my-hello id="hello"></my-hello>
+
+<script type="module">
+  class MyHello extends HTMLElement {
+    constructor() {
+      super();
+      this.attachShadow({mode: 'open'});
+      this.shadowRoot.appendChild(
+        document.querySelector('#foo').content.cloneNode(true)
+      );
+    }
+
+    connectedCallback() {
+      this.templates.msg = 'Hello, World!';
+      this.templates.colors = 'red';
+    }
+  }
+
+  customElements.define('my-hello', MyHello);
+</script>