franktopel

export function separateHtmlAndCss(str) {
    const parser = new DOMParser();
    let parsedHtml = parser.parseFromString(str, 'text/html');
    const CLASS_NAME_PREFIX = 'generated-class-name-';
    let html, css = '';

    // handle <style>-Tags
    const styleTags = parsedHtml.querySelectorAll('style');
    if (styleTags.length > 0) {
        for (let i = 0; i < styleTags.length; i++) {

franktopel

div {
    color: lighten(#a00, 10%);
    background-color: darken(#a00, 20%);
}
    

franktopel

There is a huge practical problem with web components spec v1:

In certain cases connectedCallback is being called when the element's child nodes are not yet available.

This makes web components dysfunctional in those cases where they rely on their children for setup.

See WICG/webcomponents#551 for reference.

To solve this, we have created a HTMLBaseElement class in our team which serves as the new class to extend autonomous custom elements from.

franktopel

Frontend Architecture for Single Page Applications in 2018

Contents

• Is jQuery still relevant in 2018?
• Competing SPA Frameworks
  • Angular

• React