@gaddiel.gomez/lit-text
v1.0.2
Published
A LitElement component for rendering dynamic HTML tags.
Downloads
292
Maintainers
gaddiel.gomezReadme
lit-text Component
lit-text is a lightweight web component built using the Lit library. This component allows you to dynamically create HTML elements with customizable tags and content.
Installation
To use the lit-text component in your project, you can install it via npm:
npm install @your-username/lit-textUsage
Once installed, you can import and use the lit-text component in your HTML or JavaScript files.
JavaScript/TypeScript Example
import '@your-username/lit-text';
// Now you can use the component in your HTMLHTML Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lit Text Example</title>
<script type="module">
import '@your-username/lit-text';
</script>
</head>
<body>
<lit-text tag-html="h1" content="Hello, World!"></lit-text>
<lit-text tag-html="p" content="This is a paragraph."></lit-text>
</body>
</html>Programmatic Usage
import '@your-username/lit-text';
const litTextElement = document.createElement('lit-text');
litTextElement.setAttribute('tag-html', 'p');
litTextElement.content = 'This is a paragraph.';
document.body.appendChild(litTextElement);Properties
tagHtml: The tag name to be created (e.g.,h1,p,div).content: The content inside the created tag.
Development
To build the component for distribution, use the following command:
npm run buildMake sure to have the necessary build tools configured in vite.config.js.
License
This project is licensed under the MIT License. See the LICENSE file for details.
Contributing
Contributions are welcome! Please feel free to submit a pull request or open an issue for any suggestions or improvements.