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

Please don't vandalize your posts. By posting on the Stack Exchange network, you've granted a non-revocable right, under the [CC BY-SA 4.0 license](https://creativecommons.org/licenses/by-sa/4.0/), for Stack Exchange to distribute that content (i.e. regardless of your future choices). By Stack Exchange policy, the non-vandalized version of the post is the one which is distributed, and thus, any vandalism will be reverted. If you want to know more about deleting a post please see: [How does deleting work?](/help/what-to-do-instead-of-deleting-question). — cigien, Jul 07 '22 at 06:54

score 1 · Accepted Answer · answered Jun 29 '22 at 12:18

1

You need to assign the values to attributes.

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

answered Jun 29 '22 at 12:18

abraham

46,583
10
100
152

ifDefined is not working in the litElement

1 Answers1