I'm new using custom elements and Node.js, so I'm building a simple server and component example. The thing is that when I import the component, the browser crashes with error 400 bad request, and tries to load the component but repeating the import path several times as you can see.
This is my server file:
//server.js
var http = require('http');
var fs = require('fs');
function onRequest(request, response){
response.writeHeader(200, {"Content-Type": "text/html"});
fs.readFile('./index.html',null,function(error, data){
if(error){
response.writeHead(404);
response.write('File Not Found');
}
else{
response.write(data);
}
response.end();
});
}
http.createServer(onRequest).listen(8001);
This is my index.html:
<!-- index.html-->
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>TimeStack</title>
<link rel="import" href="./Components/time-row.component.html">
</head>
<body>
<time-row></time-row>
</body>
</html>
And the component:
<!-- time-row.component.html-->
<html>
<template id="sellBtn">
<style>
:host {
--orange: #e67e22;
--space: 1.5em;
}
.btn-container {
border: 2px dashed var(--orange);
padding: var(--space);
text-align: center;
}
.btn {
background-color: var(--orange);
border: 0;
border-radius: 5px;
color: white;
padding: var(--space);
text-transform: uppercase;
}
</style>
<div class="btn-container">
<button class="btn">Comprar Ahora</button>
</div>
</template>
<script>
class TimeRow extends HTMLElement {
constructor () {
super();
this.importDocument = document.currentScript.ownerDocument;
}
connectedCallback () {
let shadowRoot = this.attachShadow({mode: 'open'});
const t = this.importDocument.querySelector('#sellBtn');
const instance = t.content.cloneNode(true);
shadowRoot.appendChild(instance);
}
}
window.customElements.define('time-row', TimeRow);
</script>
</html>
And this is my error >:/
Like you can see repeats "/Components/Components/Components/..." a lot of times and the component does not render.
From what I can tell, it looks like you may not have told your server how to handle requests of this nature.
Im not quite sure on the best way to do this with vanilla node, but with express, you can use the
serveStaticfeature for serving these files.Also, as another user has noted, your current setup is insufficient -- the code you have for your server says "For any request you get, serve them this index.html file."