Howto accordion shadycss (#111)

Author: robdodson

elements/howto-accordion/demo.html

@@ -11,12 +11,6 @@
 limitations under the License.
 -->
 <style>
- howto-accordion {
- display: flex;
- flex-wrap: wrap;
- flex-direction: column;
- align-items: stretch;
- }
  /* Headings need a background color so they are not transparent. Otherwise
  the content will shine through during the animation. */
  howto-accordion-heading {
@@ -30,15 +24,6 @@
  padding: 20px;
  background-color: lightgray;
  }
- /* The accordion gets the `animating` class assigned if its children are about
- to be animated. The implementation relies on the `transitionend` event, so
- this class _must_ define a transition on the `transform` property. */
- howto-accordion > *.animating {
- transition: transform 0.3s ease-in-out;
- }
- howto-accordion-panel:not([expanded]) {
- display: none;
- }
 </style>
 
 <howto-accordion>

elements/howto-accordion/howto-accordion.js

@@ -27,6 +27,31 @@
  END: 35,
  };
 
+ /**
+ * Cloning contents from a <template> element is more performant
+ * than using innerHTML because it avoids addtional HTML parse costs.
+ */
+ const accordionTemplate = document.createElement('template');
+ accordionTemplate.innerHTML = `
+ <style>
+ :host {
+ display: flex;
+ flex-wrap: wrap;
+ flex-direction: column;
+ align-items: stretch;
+ }
+ ::slotted(.animating) {
+ transition: transform 0.3s ease-in-out;
+ }
+ </style>
+ <slot></slot>
+ `;
+
+ // HIDE
+ // ShadyCSS will rename classes as needed to ensure style scoping.
+ ShadyCSS.prepareTemplate(accordionTemplate, 'howto-accordion');
+ // /HIDE
+
  /**
  * `HowtoAccordion` is a container element for headings and panels.
  *
@@ -36,13 +61,22 @@
  class HowtoAccordion extends HTMLElement {
  constructor() {
  super();
+ this.attachShadow({mode: 'open'});
+ this.shadowRoot.appendChild(accordionTemplate.content.cloneNode(true));
  }
 
  /**
  * `connectedCallback` hooks up the even listeners and considers the
  * `expanded` attribute on the headers to adjust their styling accordingly.
  */
  connectedCallback() {
+ // HIDE
+ // Shim Shadow DOM styles. This needs to be run in `connectedCallback()`
+ // because if you shim Custom Properties (CSS variables) the element
+ // will need access to its parent node.
+ ShadyCSS.styleElement(this);
+ // /HIDE
+
  // `<howto-accordion-headers>` emit a custom event when the heading is
  // instructed to expand.
  this.addEventListener('change', this._onChange);
@@ -413,8 +447,8 @@
  // Another advantage is focus management. If the button inside ShadowDOM has
  // focus, `document.activeElement` returns the containing
  // `<howto-accordion-heading>` element rather than the button itself.
- const shadowDOMTemplate = document.createElement('template');
- shadowDOMTemplate.innerHTML = `
+ const accordionHeadingTemplate = document.createElement('template');
+ accordionHeadingTemplate.innerHTML = `
  <style>
  :host {
  contain: content;
@@ -428,6 +462,10 @@
  </style>
  <button><slot></slot></button>
  `;
+ // HIDE
+ // ShadyCSS will rename classes as needed to ensure style scoping.
+ ShadyCSS.prepareTemplate(accordionHeadingTemplate, 'howto-accordion-heading');
+ // /HIDE
 
  /**
  * `HowtoAccordionHeading` is the element for the headings in the accordion.
@@ -469,9 +507,9 @@
  mode: 'open',
  delegatesFocus: true,
  });
- // Import the ShadowDOM template.
+ // Clone the shadow DOM template.
  this.shadowRoot.appendChild(
- document.importNode(shadowDOMTemplate.content, true)
+ accordionHeadingTemplate.content.cloneNode(true)
  );
  this._shadowButton = this.shadowRoot.querySelector('button');
  }
@@ -480,6 +518,13 @@
  * `connectedCallback()` sets up the role, event handler and initial state.
  */
  connectedCallback() {
+ // HIDE
+ // Shim Shadow DOM styles. This needs to be run in `connectedCallback()`
+ // because if you shim Custom Properties (CSS variables) the element
+ // will need access to its parent node.
+ ShadyCSS.styleElement(this);
+ // /HIDE
+
  if (!this.hasAttribute('role'))
  this.setAttribute('role', 'heading');
  if (!this.id)
@@ -553,6 +598,25 @@
  window.customElements
  .define('howto-accordion-heading', HowtoAccordionHeading);
 
+ /**
+ * Cloning contents from a &lt;template&gt; element is more performant
+ * than using innerHTML because it avoids addtional HTML parse costs.
+ */
+ const accordionPanelTemplate = document.createElement('template');
+ accordionPanelTemplate.innerHTML = `
+ <style>
+ :host(:not([expanded])) {
+ display: none;
+ }
+ </style>
+ <slot></slot>
+ `;
+
+ // HIDE
+ // ShadyCSS will rename classes as needed to ensure style scoping.
+ ShadyCSS.prepareTemplate(accordionPanelTemplate, 'howto-accordion-panel');
+ // /HIDE
+
  // `panelIdCounter` counts the number of IDs generated for panels and is used
  // to generated new, unique IDs.
  let panelIdCounter = 0;
@@ -567,12 +631,23 @@
  class HowtoAccordionPanel extends HTMLElement {
  constructor() {
  super();
+ this.attachShadow({mode: 'open'});
+ this.shadowRoot.appendChild(
+ accordionPanelTemplate.content.cloneNode(true)
+ );
  }
 
  /**
  * `connectedCallback()` sets up the role and the ID of the element.
  */
  connectedCallback() {
+ // HIDE
+ // Shim Shadow DOM styles. This needs to be run in `connectedCallback()`
+ // because if you shim Custom Properties (CSS variables) the element
+ // will need access to its parent node.
+ ShadyCSS.styleElement(this);
+ // /HIDE
+
  if (!this.hasAttribute('role'))
  this.setAttribute('role', 'region');
  if (!this.id)

elements/howto-radio-group/howto-radio-group.js

@@ -92,6 +92,13 @@
  * defaults just to indcate that they will likely change in the future.
  */
  connectedCallback() {
+ // HIDE
+ // Shim Shadow DOM styles. This needs to be run in `connectedCallback()`
+ // because if you shim Custom Properties (CSS variables) the element
+ // will need access to its parent node.
+ ShadyCSS.styleElement(this);
+ // /HIDE
+
  if (!this.hasAttribute('role'))
  this.setAttribute('role', 'radio');
  if (!this.hasAttribute('tabindex'))