Stencil Link Component

This is a Stencil version of the Link component converted from LWC.

Key Differences from LWC

| Feature | LWC | Stencil | |---------|-----|---------| | Base Class | LightningElement | No base class, uses @Component decorator | | Properties | @api | @Prop() | | Templates | HTML template file | JSX in render() method | | Styling | Scoped CSS file | CSS file referenced in component | | Events | this.dispatchEvent() | @Event() decorated EventEmitter | | Lifecycle | renderedCallback() | componentDidLoad() | | Shadow DOM | renderMode = 'light' | shadow: false option |

Files

• link.tsx - Main component file (TypeScript + JSX)
• link.css - Component styles
• stencil.config.ts - Stencil configuration
• index.html - Demo page

Installation

npm install

Development

npm start

This starts the development server and watches for file changes.

Build

npm run build

Compiles the component and outputs to the dist directory.

Usage

As a Web Component

<x-link
  title="Click me"
  link="https://example.com"
  screenReaderText="Opens example.com in new tab"
></x-link>

With Config Object

<x-link id="my-link"></x-link>

<script>
  const link = document.getElementById('my-link');
  link.config = {
    title: 'My Link',
    link: 'https://example.com',
    showExternalLinkIcon: true,
    preventDefault: false
  };
</script>

Event Listening

const link = document.querySelector('x-link');
link.addEventListener('linkclick', (event) => {
  console.log('Link clicked:', event.detail);
  // detail contains: { href, id }
});

Component Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | config | LinkConfig | {} | Configuration object | | id | string | '' | Element ID | | title | string | '' | Link text | | link | string | '#' | URL to navigate to | | screenReaderText | string | '' | Accessibility text | | preventDefault | boolean | false | Prevent default link behavior |

Config Object

interface LinkConfig {
  id?: string;
  title?: string;
  link?: string;
  screenReaderText?: string;
  preventDefault?: boolean;
  showExternalLinkIcon?: boolean;
}

Events

linkclick - Fired when the link is clicked

• detail.href - The link href
• detail.id - The element id