Do not use "title" as an attribute/property of an element

Author: Westbrook

src/generators/app-lit-element-ts/templates/my-app.stories.ts

@@ -16,15 +16,15 @@ interface Story<T> {
 }
 
 interface ArgTypes {
-  title?: string;
+  header?: string;
   backgroundColor?: string;
 }
 
-const Template: Story<ArgTypes> = ({ title, backgroundColor = 'white' }: ArgTypes) => html`
-  <<%= tagName %> style="--<%= tagName %>-background-color: ${backgroundColor}" .title=${title}></<%= tagName %>>
+const Template: Story<ArgTypes> = ({ header, backgroundColor = 'white' }: ArgTypes) => html`
+  <<%= tagName %> style="--<%= tagName %>-background-color: ${backgroundColor}" .header=${header}></<%= tagName %>>
 `;
 
 export const App = Template.bind({});
 App.args = {
-  title: 'My app',
+  header: 'My app',
 };

src/generators/app-lit-element/templates/my-app.stories.js

@@ -9,17 +9,17 @@ export default {
   },
 };
 
-function Template({ title, backgroundColor }) {
+function Template({ header, backgroundColor }) {
   return html`
     <<%= tagName %>
       style="--<%= tagName %>-background-color: ${backgroundColor || 'white'}"
-      .title=${title}
+      .header=${header}
     >
     </<%= tagName %>>
   `;
 }
 
 export const App = Template.bind({});
 App.args = {
-  title: 'My app',
+  header: 'My app',
 };

src/generators/demoing-storybook-ts/templates/static-scaffold/stories/index.stories.ts

@@ -5,7 +5,7 @@ export default {
   title: '<%= className %>',
   component: '<%= tagName %>',
   argTypes: {
-    title: { control: 'text' },
+    header: { control: 'text' },
     counter: { control: 'number' },
     textColor: { control: 'color' },
   },
@@ -18,21 +18,21 @@ interface Story<T> {
 }
 
 interface ArgTypes {
-  title?: string;
+  header?: string;
   counter?: number;
   textColor?: string;
   slot?: TemplateResult;
 }
 
 const Template: Story<ArgTypes> = ({
-  title = 'Hello world',
+  header = 'Hello world',
   counter = 5,
   textColor,
   slot,
 }: ArgTypes) => html`
   <<%= tagName %>
     style="--<%= tagName %>-text-color: ${textColor || 'black'}"
-    .title=${title}
+    .header=${header}
     .counter=${counter}
   >
     ${slot}
@@ -41,9 +41,9 @@ const Template: Story<ArgTypes> = ({
 
 export const Regular = Template.bind({});
 
-export const CustomTitle = Template.bind({});
-CustomTitle.args = {
-  title: 'My title',
+export const CustomHeader = Template.bind({});
+CustomHeader.args = {
+  header: 'My header',
 };
 
 export const CustomCounter = Template.bind({});

src/generators/demoing-storybook/templates/static-scaffold/stories/index.stories.js

@@ -5,17 +5,17 @@ export default {
   title: '<%= className %>',
   component: '<%= tagName %>',
   argTypes: {
-    title: { control: 'text' },
+    header: { control: 'text' },
     counter: { control: 'number' },
     textColor: { control: 'color' },
   },
 };
 
-function Template({ title = 'Hello world', counter = 5, textColor, slot }) {
+function Template({ header = 'Hello world', counter = 5, textColor, slot }) {
   return html`
     <<%= tagName %>
       style="--<%= tagName %>-text-color: ${textColor || 'black'}"
-      .title=${title}
+      .header=${header}
       .counter=${counter}
     >
       ${slot}
@@ -25,9 +25,9 @@ function Template({ title = 'Hello world', counter = 5, textColor, slot }) {
 
 export const Regular = Template.bind({});
 
-export const CustomTitle = Template.bind({});
-CustomTitle.args = {
-  title: 'My title',
+export const CustomHeader = Template.bind({});
+CustomHeader.args = {
+  header: 'My header',
 };
 
 export const CustomCounter = Template.bind({});

src/generators/testing-ts/templates/my-el.test.ts

@@ -4,10 +4,10 @@ import { <%= className %> } from '../src/<%= className %>.js';
 import '../src/<%= tagName %>.js';
 
 describe('<%= className %>', () => {
-  it('has a default title "Hey there" and counter 5', async () => {
+  it('has a default header "Hey there" and counter 5', async () => {
     const el = await fixture<<%= className %>>(html`<<%= tagName %>></<%= tagName %>>`);
 
-    expect(el.title).to.equal('Hey there');
+    expect(el.header).to.equal('Hey there');
     expect(el.counter).to.equal(5);
   });
 
@@ -18,10 +18,10 @@ describe('<%= className %>', () => {
     expect(el.counter).to.equal(6);
   });
 
-  it('can override the title via attribute', async () => {
-    const el = await fixture<<%= className %>>(html`<<%= tagName %> title="attribute title"></<%= tagName %>>`);
+  it('can override the header via attribute', async () => {
+    const el = await fixture<<%= className %>>(html`<<%= tagName %> header="attribute header"></<%= tagName %>>`);
 
-    expect(el.title).to.equal('attribute title');
+    expect(el.header).to.equal('attribute header');
   });
 
   it('passes the a11y audit', async () => {

src/generators/testing/templates/my-el.test.js

@@ -4,10 +4,10 @@ import { fixture, expect } from '@open-wc/testing';
 import '../<%= tagName %>.js';
 
 describe('<%= className %>', () => {
-  it('has a default title "Hey there" and counter 5', async () => {
+  it('has a default header "Hey there" and counter 5', async () => {
     const el = await fixture(html`<<%= tagName %>></<%= tagName %>>`);
 
-    expect(el.title).to.equal('Hey there');
+    expect(el.header).to.equal('Hey there');
     expect(el.counter).to.equal(5);
   });
 
@@ -18,10 +18,10 @@ describe('<%= className %>', () => {
     expect(el.counter).to.equal(6);
   });
 
-  it('can override the title via attribute', async () => {
-    const el = await fixture(html`<<%= tagName %> title="attribute title"></<%= tagName %>>`);
+  it('can override the header via attribute', async () => {
+    const el = await fixture(html`<<%= tagName %> header="attribute header"></<%= tagName %>>`);
 
-    expect(el.title).to.equal('attribute title');
+    expect(el.header).to.equal('attribute header');
   });
 
   it('passes the a11y audit', async () => {

src/generators/wc-lit-element-ts/templates/MyEl.ts

@@ -10,7 +10,7 @@ export class <%= className %> extends LitElement {
     }
   `;
 
-  @property({ type: String }) title = 'Hey there';
+  @property({ type: String }) header = 'Hey there';
 
   @property({ type: Number }) counter = 5;
 
@@ -20,7 +20,7 @@ export class <%= className %> extends LitElement {
 
   render() {
     return html`
-      <h2>${this.title} Nr. ${this.counter}!</h2>
+      <h2>${this.header} Nr. ${this.counter}!</h2>
       <button @click=${this.__increment}>increment</button>
     `;
   }

src/generators/wc-lit-element-ts/templates/static/demo/index.html

@@ -15,10 +15,10 @@
     import { html, render } from 'lit';
     import '../dist/src/<%= tagName %>.js';
 
-    const title = 'Hello owc World!';
+    const header = 'Hello owc World!';
     render(
       html`
-        <<%= tagName %> .title=${title}>
+        <<%= tagName %> .header=${header}>
           some light-dom
         </<%= tagName %>>
       `,

src/generators/wc-lit-element/templates/static/demo/index.html

@@ -15,10 +15,10 @@
     import { html, render } from 'lit';
     import '../<%= tagName %>.js';
 
-    const title = 'Hello owc World!';
+    const header = 'Hello owc World!';
     render(
       html`
-        <<%= tagName %> .title=${title}>
+        <<%= tagName %> .header=${header}>
           some light-dom
         </<%= tagName %>>
       `,

test/snapshots/fully-loaded-app/stories/scaffold-app.stories.js

@@ -9,17 +9,17 @@ export default {
   },
 };
 
-function Template({ title, backgroundColor }) {
+function Template({ header, backgroundColor }) {
   return html`
     <scaffold-app
       style="--scaffold-app-background-color: ${backgroundColor || 'white'}"
-      .title=${title}
+      .header=${header}
     >
     </scaffold-app>
   `;
 }
 
 export const App = Template.bind({});
 App.args = {
-  title: 'My app',
+  header: 'My app',
 };