Element: web-app (References) | Realm

dark

Summary

web-app

custom-element

element-attr

element-state

element-flow

global-state

import-element

import-script

import-style

is-visible

is-hidden

repeat-list

trigger-event

listen-event

set-attr

set-state

set-timer

send-event

http-request

request-header

request-body

response-ok

response-fail

script

trigger-element

Comparison Operators

Mutation Operators

Data Source

Summary

web-app

custom-element

element-attr

element-state

element-flow

global-state

import-element

import-script

import-style

is-visible

is-hidden

repeat-list

trigger-event

listen-event

set-attr

set-state

set-timer

send-event

http-request

request-header

request-body

response-ok

response-fail

script

trigger-element

Comparison Operators

Mutation Operators

Data Source

The web-app tag is an optional tag, the main purpose of this element tag is to handle WebComponents glitch that sometimes happen when the page is loaded.

When the page is loaded, the web-app tag will adds loaded attribute, so you can use it to hide the page’s content until the page is fully loaded.

<!DOCTYPE html>
<html>
  <head>
    ...
    <style>
      web-app:not([loaded]) {
        /* add your styles here for example filter or opacity = 0 */
      }
      web-app[loaded] {
        /* after loaded you can set the styles back to normal */
      }
    </style>
    ...
  </head>
</html>