feat: update generator to use latest conventions

boltdesignsystem · Oct 8, 2019 · 6a6172c · 6a6172c
1 parent b335548
commit 6a6172c
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 13 deletions.
diff --git a/...ges/generators/yeoman-create-component/generators/component/templates/component.html.twig b/...ges/generators/yeoman-create-component/generators/component/templates/component.html.twig
@@ -5,15 +5,12 @@
 {% endif %}
 
 {# Variables #}
-{% set base_class = "c-bolt-<%= props.name.kebabCase %>" %}
-{% set props = create_attribute({
-
-}) %}
-{% set attributes = merge_attributes(create_attribute(attributes|default({})), props) %}
+{% set this = init(schema) %}
+{% set inner_attributes = create_attribute({}) %}
 
 {# Array of classes based on the defined + default props #}
 {% set classes = [
-  base_class,
+  "c-bolt-<%= props.name.kebabCase %>",
 ] %}
 
 {#
@@ -34,9 +31,9 @@
 
 <bolt-<%= props.name.kebabCase %>
   {% if outer_classes %} class="{{ outer_classes|join(' ') }}" {% endif %}
-  {{ attributes|without('class') }}
+  {{ this.props|without("class") }}
 >
-  <div {{ inner_attributes.addClass(inner_classes) }} is="shadow-root">
-   
-  </div>
+  <replace-with-children {{ inner_attributes.addClass(inner_classes) }}>
+
+  </replace-with-children>
 </bolt-<%= props.name.kebabCase %>>
diff --git a/packages/generators/yeoman-create-component/generators/component/templates/component.js b/packages/generators/yeoman-create-component/generators/component/templates/component.js
@@ -1,4 +1,4 @@
-import { props, define, hasNativeShadowDomSupport } from '@bolt/core/utils';
+import { props, define } from '@bolt/core/utils';
 import { withLitHtml, html } from '@bolt/core/renderers/renderer-lit-html';
 import classNames from 'classnames/bind';
 import styles from './<%= props.name.kebabCase %>.scss';
@@ -24,7 +24,6 @@ class Bolt<%= props.name.pascalCase %> extends withLitHtml() {
   // https://github.com/WebReflection/document-register-element#upgrading-the-constructor-context
   constructor(self) {
     self = super(self);
-    self.useShadow = hasNativeShadowDomSupport;
     self.schema = this.getModifiedSchema(schema);
     return self;
   }
@@ -39,7 +38,7 @@ class Bolt<%= props.name.pascalCase %> extends withLitHtml() {
 
     return html`
       ${this.addStyles([styles])}
-      <div class="${classes}" is="shadow-root">
+      <div class="${classes}">
         ${this.slot('default')}
       </div>
     `;