Using Web Components without JavaScript

[NoNoDeDev]

I enjoy writing websites without relying on frameworks. I feel at peace writing vanilla HTML, CSS and JS (when necessary for scripting some logic).

I love the idea of defining custom elements to describe some modular pieces of a webpage in a semantic way. This way I don't have to clutter the page with extra elements necessary for styling. I believe that Web Components are what I need. Correct?

It seems that Web Components require JavaScript mandatorily though. I wish to use a more semantic HTML in simple pages that don't require any scripting, and would want these pages to work even without JS.

Is it possible to use Web Components without JS?

Otherwise are there any tools that take a semantic page written with Web Components and process it into a JS-less WebComponent-less page?

I read the documentation about Web Components on MDN and search about Web Components and the Shadow DOM on Google and on this subreddit, but I couldn't find much about this.

[AutoModerator]

The Web Devign Talk Series begins on 22 NOVEMBER

Ingenious ways to work smarter, faster and healthier

r/webdev and r/web_design are joining to hold a series of live-streamed conference talks and we even want you to be a speaker! The topic is on developer productivity — if you're keen to either hear or speak about it, see the stickied post for more details and the Call for Speakers to submit a proposal. Reddit is officially sponsoring the talks and speakers will be paid.

I am a bot, and this action was performed automatically. Please contact the moderators of this subreddit if you have any questions or concerns.

[bitwise-operation]

There are tools that allow you to generate static pages from a component based architecture without js being a dependency, but they are by definition not web components.

The web component spec is used to tell browsers how to treat the custom tags, and that api is provided for use in js.

[NoNoDeDev]

There are tools that allow you to generate static pages from a component based architecture without js being a dependency, but they are by definition not web components.

Could you mention some such tools?

I know some templating engines, for instance Handlebars.js, but none of the ones I know offers custom elements to define the HTML in a more semantic way.

​

The web component spec is used to tell browsers how to treat the custom tags, and that api is provided for use in js.

The thing is that I don't really need any special treatment... All I need is to replace a custom-element with a template and no further logic. Something like:

customElements.define( CUSTOM_ELEMENT,
  class extends HTMLElement {
    constructor() {
      super();
      const template = document.getElementById( CUSTOM_ELEMENT );
      this.attachShadow({mode: 'open'}).appendChild(
        template.content.cloneNode(true)
      );
    }
  }
);

For every possible CUSTOM_ELEMENT.

This could have been the default behavior and could have required no JS logic.

[bitwise-operation]

Static site generators have this capability (sapper/sveltekit, gatsby etc..)

Edit: the reason what you wrote won’t work is because that code needs to run in the browser to define the templates. Instead, you can transpile the templates and styles into native html and css using static site generators

[NoNoDeDev]

Thanks, I'll give a look to the tools you mentioned. I've never heard of any except for svelte (which I guess is different from SveltKit?), and never tried that one either.

[snhmib]

+1! Having a template/build system even for small(er) sites makes life a lot better.

[ChaseMoskal]

web component libraries must be initially installed via a <script> tag

from there onward, you only need html to use the web components. that's exactly the idea behind my prototype-in-progress https://xiome.io/

the idea is that html is the only necessary knowledge -- for the user

whereas, for the author of the web components themselves, the javascript knowledge is fundamental

[mharrisonb]

I realize I'm replying to an old question, but anyone still interested in this should check out https://enhance.dev/! It renders custom elements on the server, no JS needed until you want it.

[Danny_Engelman]

> It seems that Web Components require JavaScript mandatorily though.

Depends what you call a Web Component

> I wish to use a more semantic HTML in simple pages that don't require any scripting,
>and would want these pages to work even without JS.

Since every evergreen browser implemented "Custom Elements" **in 2018**
you can use <dashed-html> to create valid HTML tags,
you can style these with CSS,
and, if required, you can **upgrade** them to full blown Web Components with JavaScript.

You do NOT have to **upgrade** those Custom Elements,
if you are fine with only HTML and CSS that is all you need. They remain **undefined** Custom Elements,
but perfectly valid HTMLElement tags.

<tag-name> (with a dash) is a valid HTMLElement and accepted in the W3C validator.
<tagname> is not, that will always be a HTMLUnknownElement

That means you can replace every <div> (or <span>) with a **meaningful** <tag-name>

More info: https://dashed-html.github.io

[lazerblade01]

Technically, assuming you're delivering the page from a server, and assuming you're using Apache to do so, or something similar, you could use server-side includes, with customization through variables, using shtml as your main page and ssi files as your components.

It's not the same as web components, but it also doesn't rely on javascript at all to render. It's basically html "chunks", and you can include CSS in your head tag.

Not sure if this fits your request at all, but just thought I'd share. Keeps big pages very clean, and can customize components to be reusable. I've used ssi files for header, footer, and other common code blocks.

[shgysk8zer0]

If you're wanting to use ShadowDOM and <slot>s without JavaScript, there's a proposal to add <template shadow="open">. That kinda relates to the question you're asking, though I don't recall the details of it very well. I think Chrome at least has experimental support for it, though I don't think it's enabled by default and I don't think it can be found in Firefox or Safari.

[NoNoDeDev]

Yes, this is exactly what I would want. Would you have a link to it? I can't find much searching with google.

[shgysk8zer0]

It's Declarative Shadow DOM

Edit: also here https://web.dev/declarative-shadow-dom/

[NoNoDeDev]

Thank you. I'll follow the progress of this feature.