Security News
Meet Socket at Black Hat Europe and BSides London 2025
Socket is heading to London! Stop by our booth or schedule a meeting to see what we've been working on.
By Anders Søndergaard - Nov 11, 2025
@ajnauleau/custom-components
Advanced tools
Custom Web Components
Make and style custom web components easily!
Installation
$ npm install --save @ajnauleau/custom-components
Style
First start out by adding css styles to your component:
import Component from '@ajnauleau/custom-components';
const Custom = Component.styled`
color: red;
background: black;
`;
Extend
Extend your component by adding any valid HTML between template literals ``:
class WebComponent extends Custom {
constructor() {
super();
}
render() {
let world = 'world';
return (
`<div>
<p>hello ${world}</p>
<div>
`
)
}
}
Render
Render your new web component and give it a custom name. REMEMBER! Web component names must use a hyphen (-).
customElements.define('custom-component', WebComponent);
Result
Embed and link your javascript, then use your new custom component.
<html>
<body>
<custom-component>
</custom-component>
<script type="module" src="./index.js"></script>
</body>
</html>
Summary
Here's the complete javascript file for your reference.
import Component from '@ajnauleau/custom-components';
const Custom = Component.styled`
color: red;
background: black;
`;
class WebComponent extends Custom {
constructor() {
super();
}
render() {
return (
`<p>hello</p>`
)
}
}
customElements.define('custom-component', WebComponent);
Coming Soon!
Access Props
Attribute to Props, similar to React
Lifecycle
constructor()
render()
componentDidMount()
componentDidUpdate()
componentWillUnmount()
FAQs
'Simple Custom Web Components for your Project'
The npm package @ajnauleau/custom-components receives a total of 0 weekly downloads. As such, @ajnauleau/custom-components popularity was classified as not popular.
We found that @ajnauleau/custom-components demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Package last updated on 01 May 2020
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Related posts
Security News
OWASP 2025 Top 10 Adds Software Supply Chain Failures, Ranked Top Community Concern
OWASP’s 2025 Top 10 introduces Software Supply Chain Failures as a new category, reflecting rising concern over dependency and build system risks.
By Sarah Gooding - Nov 08, 2025
Research
/Security News
9 Malicious NuGet Packages Deliver Time-Delayed Destructive Payloads
Socket researchers discovered nine malicious NuGet packages that use time-delayed payloads to crash applications and corrupt industrial control systems.
By Kush Pandya - Nov 06, 2025