ifDefined is not working in the litElement

Question

The main page

export class GdwcHeading extends LitElement {
static get properties() {
return {
  /**
   * Heading size
   */
  size: { type: String },
  /**
   * Heading level
   */
  level: { type: String },
};
}

render() {

const styles = { fontSize: `var(${this.size})` };
const style = styleMap(styles);
this.size = { fontSize: `var(${this.size})` };
this.sanitizeLevel();
return html` <${unsafeStatic(this.sanitizeLevel(this.level))} 
 style=${style}><slot></slot></${unsafeStatic(
  this.sanitizeLevel(this.level)
)}> `;
}

sanitizeLevel(level) {
switch (this.level) {
  case `h1`:
    this.level = 'h1';
    break;
  case `h3`:
    this.level = 'h3';
    break;
  case `h4`:
    this.level = 'h4';
    break;
  case `h5`:
    this.level = 'h5';
    break;
  case `h6`:
    this.level = 'h6';
    break;
  default:
    this.level = 'h2';
    break;
}
return level;
}
}

The story page

import { html } from 'lit';
import { ifDefined } from 'lit/directives/if-defined.js';
import { controls, themeControls } from '../stories/fixtures/controls.js';
import '../heading.js';
import '../store.js';
import '../provider.js';
import '../stories/components/gdwc-theme.js';
export default {
  title: 'Elements/Heading',
  component: 'Heading',
  description: 'A simple heading component',
  parameters: {
  docs: {
  description: {
    component: 'A generic heading',
  },
  },
  },
  argTypes: {
  defaultSlot: {
  table: {
    category: 'slots',
  },
  },
  size: {
  options: controls.sizes.options,
  control: controls.sizes.control,
  description: controls.sizes.description,
  table: {
    category: 'properties',
  },
  },
  level: {
  options: controls.headingLevels.options,
  control: controls.headingLevels.control,
  description: controls.headingLevels.description,
  table: {
    category: 'properties',
  },
  },
  ...themeControls,
  },
  };

  const Template = args => {
  const { size, defaultSlot, level } = args;
  return html` <gdwc-theme args=${JSON.stringify(args)}>
  <gdwc-heading ${ifDefined(size)} ${ifDefined(level)}
  >${defaultSlot}</gdwc-heading
  >
  </gdwc-theme>`;
  };

  export const Primary = Template.bind({});

  Primary.args = {
  defaultSlot: 'My Custom Heading',
  };

Over here ifDefined should render the level variable. but it is sticking with the 'h2' level in the sanitizeLevel function is that any issue in the sanitize level function. Please try to help me out with this. Any ref to the ifDefined function is that https://lit.dev/docs/templates/directives/#ifdefined

Answer 1

You need to assign the values to attributes.

<gdwc-heading size="${ifDefined(size)}" level="${ifDefined(level)}">
  ${defaultSlot}
</gdwc-heading>