X Foo Button

100%

✓ Published0🌍 Public

Last edited Dec 4, 2015

Created on Dec 4, 2015

This example demonstrates how to create a custom HTML element using the Web Components API, specifically through the `document.registerElement` method and the `createdCallback` lifecycle hook. It shows a simple button-like `x-foo` element that, when instantiated, displays the text "I'm an x-foo button!" via the `webcomponents.js` polyfill. The code defines a prototype extending `HTMLButtonElement` and styles the element with large font size in the CSS. This serves as a minimal, self-contained illustration of custom element creation, based on the tutorial cited in the README, with no additional data sources or rendering logic beyond the DOM manipulation shown.

AI-generated description

A demonstration of how to use webcomponents.js to build a simple WebComponent. This is a copy of the example presented in this tutorial Custom Elements, with slight modifications so it works on bl.ocks.org.

According to the tutorial Custom Elements, the following lifecycle callbacks are supported:

createdCallback() is called when a custom element is created.
attachedCallback() is called when a custom element is inserted into a DOM subtree.
detachedCallback() is called when a custom element is removed from a DOM subtree.
attributeChangedCallback(attributeName) is called when a custom element's attribute value has changed

This example only uses the createdCallback() method. These methods are documented in more detail in javascripture: CustomElementPrototype.

Built with blockbuilder.org

Similar vizzes

Loading thumbnail…

css-article-6.jsx

This example demonstrates how a styled button can be created using plain HTML and CSS within a React component, without any additional styling libraries or complex JavaScript. It shows a simple interactive element—a red button with white text and a subtle shadow—as a standalone snippet. The code relies on standard React JSX syntax and Tailwind CSS utility classes (such as `ma4`, `bg-red`, `white`, `ph4`, `pv2`, `f6`, `shadow`) to define the button’s appearance and spacing. The rendering approach is straightforward: a single JSX element returns the button, highlighting how React handles presentational components with minimal setup.

HHerbCaudill

65% match

Loading thumbnail…

HTML Starter

This example shows a minimal HTML page displaying a single button labeled “hello” at a large font size. The page imports Bootstrap 4 CSS for styling and uses a border class to outline the button, while custom inline CSS centers the content. The rendering approach is straightforward static HTML without any JavaScript interactions or data visualization, serving as a bare-bones starter template for web development projects.

Rrichad97

61% match

Loading thumbnail…

css-article-07.jsx

This example shows a single interactive button rendered with React and styled using Tailwind CSS classes. The button includes padding, a primary background color, white text, a small font size, and a shadow, demonstrating a common UI pattern. The code uses JSX to define the button element and applies utility classes directly, showcasing how React components can integrate Tailwind for rapid styling. No additional logic or event handlers are present, focusing solely on static visual presentation.

HHerbCaudill

61% match

Loading thumbnail…

css: button with bevel (green)

This example demonstrates a purely visual, CSS-based button component, showing how a static green beveled button is styled without any interactive behavior. The code relies on standard CSS properties, including `background-clip`, `background-image` with a linear gradient, `border-radius`, `border-color`, and an inset `box-shadow` to create the beveled, three-dimensional appearance. It also uses `text-shadow` for subtle depth on the white text. The styling defines the button’s dimensions, padding, and typography, with no JavaScript or external libraries involved. The rendering approach is entirely dependent on the browser’s CSS engine, and no data source is used.

BBraMKJ

60% match

Loading thumbnail…

css-article-8.jsx

This example shows how to apply theme-aware styling to a simple button component in a React application. The code uses the `sx` prop from the Theme UI library to define styles inline, pulling color values like `primary` and spacing tokens like `m: 10` directly from the theme object. The button renders with white text, a large box shadow, and padding derived from the theme’s spacing scale. The rendering approach relies on React’s JSX syntax, with no external data sources or interactive behavior shown beyond the static button element.

HHerbCaudill

60% match

Loading thumbnail…

HTML Element

This example demonstrates the creation of an HTML element on a web page using vanilla JavaScript. It shows the fundamental pattern of dynamically adding a div to the document body. The code uses the Document Object Model (DOM) API methods `document.getElementsByTagName` to locate the root `<html>` element and `document.createElement` with `appendChild` to insert a new element with the id `dogsb`. A self-contained `elementObject` constructor function encapsulates the logic, and inline CSS styles set the page’s text alignment and font size.

SSteveAaron

60% match

Loading thumbnail…

Fork of HTML Starter

This example demonstrates a static HTML page with two clickable buttons, each styled differently. The first button uses inline CSS with a red text color and blue background, while the second remains unstyled. The code relies on native HTML elements and inline style attributes, with no JavaScript or external libraries involved. It serves as a minimal starting point for testing basic web page structure and button interactivity.

JjanoPig

60% match

Loading thumbnail…

ButtonClick

This example demonstrates a simple interactive button that triggers a JavaScript function when clicked. The page displays a large “Click me” button centered on a white background, and clicking it logs “Hello JavaScript!” to the browser’s console. The implementation uses plain HTML and CSS for layout and styling, with the click handler defined in `index.js` and loaded via a bundled script. React is listed as the framework, though the visible code relies directly on native DOM event handling rather than React components.

XXin Li

60% match