Implementing Scoped Styles in a Vue Component

Scoped styles are a crucial feature in Vue.js that encapsulate CSS rules within a component, preventing them from affecting other parts of the application and vice versa. This challenge will guide you in creating a Vue component with properly scoped styles using TypeScript, ensuring style isolation and maintainability. Understanding and implementing scoped styles is fundamental for building large, complex Vue applications.

Problem Description

You are tasked with creating a simple Vue component called MyCard that displays a title and a description within a card-like container. The component should utilize scoped styles to ensure that the CSS rules defined within the component only apply to the elements within that component and do not leak out to affect other parts of the application. The card should have a distinct background color and a border. The title should be styled with a specific font weight and color. The description should be styled with a smaller font size.

Key Requirements:

• Create a Vue component named MyCard.vue.
• The component should accept a title and description prop.
• Implement scoped styles within the component to style the card, title, and description.
• The card should have a light gray background (#f0f0f0).
• The card should have a 1px solid gray border (#ccc).
• The title should be bold (font-weight: bold) and dark blue (color: #007bff).
• The description should have a smaller font size (font-size: 0.9em).
• The component should render correctly with different title and description values.

Expected Behavior:

When the MyCard component is rendered, it should display a card with the provided title and description, styled according to the scoped CSS rules. The styles should be isolated to the component, meaning that changes to the component's styles will not affect other elements in the application, and vice versa.

Edge Cases to Consider:

• Empty title or description props: The component should still render gracefully, displaying an empty card or a default message.
• Invalid prop types: While TypeScript will help prevent this, consider how the component would behave if unexpected data types are passed as props.

Examples

Example 1:

Input: title="My Awesome Card", description="This is a sample description for the card."
Output: A card with a light gray background, a gray border, a bold dark blue title displaying "My Awesome Card", and a smaller description displaying "This is a sample description for the card."
Explanation: The component renders the card with the provided title and description, applying the scoped styles to format the elements correctly.

Example 2:

Input: title="", description=""
Output: A card with a light gray background, a gray border, an empty title area, and an empty description area.
Explanation: The component handles empty props gracefully, rendering the card without displaying any title or description text.

Constraints

• The component must be written in TypeScript.
• The component must use scoped styles.
• The styling should be done using CSS, not inline styles.
• The component should be a single-file component (.vue).
• The background color must be #f0f0f0.
• The border color must be #ccc.
• The title color must be #007bff.

Notes

• Vue's scoped styles automatically add a unique data attribute to each element within the component, ensuring that the CSS rules only apply to those elements.
• Consider using the v-if directive to conditionally render the title and description if they are empty.
• Focus on creating a clean and well-structured component with clear and concise CSS rules.
• Remember to import the component into a parent component to test its functionality.